/* tokens/colors.css — Clínica Dental Santo Diente
   Capa 1: valores crudos. Capa 2: alias semánticos.
   Los seis hex de marca están literales, sin redondear:
   #532B69 #7D268B #FF0089 #1FF2DA #F6E6CC #CB9A33
   El resto de cada escala se generó en OKLCH desde ese ancla. */

:root {
  /* ══ CAPA 1 · Valores crudos ══════════════════════════════════════ */

  /* Morado de marca · #532B69 vive en el paso 900 */
  --morado-50: #FAF4FF;
  --morado-100: #F2E0FD;
  --morado-200: #E4C5F7;
  --morado-300: #D2A6EE;
  --morado-400: #C088E1;
  --morado-500: #AC6FD0;
  --morado-600: #9357B6;
  --morado-700: #7B439A;
  --morado-800: #61307C;
  --morado-900: #532B69;

  /* Morado claro · #7D268B vive en el paso 700 */
  --violeta-50: #FDF3FF;
  --violeta-100: #F9DDFD;
  --violeta-200: #EFBFF7;
  --violeta-300: #E29DED;
  --violeta-400: #D27DE0;
  --violeta-500: #BF61CF;
  --violeta-600: #A548B4;
  --violeta-700: #7D268B;
  --violeta-800: #6F227B;
  --violeta-900: #4D0C56;

  /* Magenta · #FF0089 vive en el paso 500 */
  --magenta-50: #FFF3F6;
  --magenta-100: #FFDEE7;
  --magenta-200: #FFBED1;
  --magenta-300: #FF95B7;
  --magenta-400: #FF639F;
  --magenta-500: #FF0089;
  --magenta-600: #D50071;
  --magenta-700: #B0005C;
  --magenta-800: #8A0047;
  --magenta-900: #5D002E;

  /* Turquesa · #1FF2DA vive en el paso 200 */
  --turquesa-50: #DFFFF8;
  --turquesa-100: #A6FBEC;
  --turquesa-200: #1FF2DA;
  --turquesa-300: #00D7C2;
  --turquesa-400: #00BDA9;
  --turquesa-500: #00A493;
  --turquesa-600: #00897A;
  --turquesa-700: #007064;
  --turquesa-800: #00574D;
  --turquesa-900: #003932;

  /* Mostaza · #CB9A33 vive en el paso 400 */
  --mostaza-50: #FFF6E6;
  --mostaza-100: #F6E6CA;
  --mostaza-200: #EACF9D;
  --mostaza-300: #DCB46A;
  --mostaza-400: #CB9A33;
  --mostaza-500: #B68400;
  --mostaza-600: #986E00;
  --mostaza-700: #7D5A00;
  --mostaza-800: #614500;
  --mostaza-900: #402C00;

  /* Arena · el crema #F6E6CC vive en el paso 100 */
  --arena-50: #FDF6EA;
  --arena-100: #F6E6CC;
  --arena-200: #E0D0B7;
  --arena-300: #C6B9A3;
  --arena-400: #ADA18E;
  --arena-500: #968C7C;
  --arena-600: #7D7566;
  --arena-700: #675F53;
  --arena-800: #50493E;
  --arena-900: #352F26;

  /* Tinta · neutro con matiz morado, para texto y bordes */
  --tinta-100: #F1EFF3;
  --tinta-200: #E0DCE2;
  --tinta-300: #C6C2C9;
  --tinta-400: #A7A2AB;
  --tinta-500: #8A838E;
  --tinta-600: #6D6572;
  --tinta-700: #524957;
  --tinta-800: #382F3D;
  --tinta-900: #1F1625;

  /* ══ CAPA 2 · Alias semánticos ═════════════════════════════════════
     Esto es lo que se usa al diseñar. La capa 1 nunca se toca en una
     pieza: cambiarla aquí repinta el sistema entero.                  */

  /* Superficies */
  --color-surface-page:      var(--arena-100);   /* fondo por defecto: crema */
  --color-surface-card:      #FFFFFF;
  --color-surface-sunken:    var(--arena-200);
  --color-surface-invertida:  var(--morado-900);  /* bloques de marca */
  --color-surface-acento:    var(--violeta-700);
  --color-surface-alerta:    var(--magenta-500);  /* solo bloques cortos */

  /* Texto sobre superficie clara */
  --color-text-primary:      var(--tinta-900);
  --color-text-secondary:    var(--tinta-700);
  --color-text-terciario:    var(--tinta-600);
  --color-text-marca:        var(--morado-900);
  --color-text-enlace:       var(--violeta-700);
  --color-text-enlace-hover: var(--magenta-700);

  /* Texto sobre superficie oscura */
  --color-text-on-dark:           #FFFFFF;
  --color-text-on-dark-secondary: var(--morado-200);
  --color-text-on-dark-acento:    var(--turquesa-200);
  --color-text-on-accent:         #FFFFFF;

  /* Bordes y líneas */
  --color-border-hairline: var(--arena-200);
  --color-border-fuerte:   var(--tinta-900);
  --color-border-marca:    var(--morado-900);
  --color-border-on-dark:  var(--morado-700);

  /* Interacción */
  --color-accent:        var(--morado-900);
  --color-accent-hover:  var(--violeta-700);
  --color-accent-press:  var(--morado-800);
  --color-cta:           var(--magenta-500);   /* la llamada a la acción */
  --color-cta-hover:     var(--magenta-600);
  --color-cta-text:      #FFFFFF;
  --color-focus-ring:    var(--turquesa-300);

  /* Estados */
  --color-success:    var(--turquesa-700);
  --color-success-bg: var(--turquesa-50);
  --color-warning:    var(--mostaza-600);
  --color-warning-bg: var(--mostaza-50);
  --color-danger:     #B3123C;
  --color-danger-bg:  var(--magenta-50);
  --color-info:       var(--violeta-700);
  --color-info-bg:    var(--violeta-50);

  /* Decoración — nunca llevan texto chico encima */
  --color-deco-1: var(--magenta-500);
  --color-deco-2: var(--turquesa-200);
  --color-deco-3: var(--mostaza-400);
  --color-deco-4: var(--violeta-700);

}

/* ── Ámbito invertido ──────────────────────────────────────────────
   No es un tema oscuro del sistema operativo: es el bloque de marca.
   Se aplica a una sección, una tarjeta o una pieza entera.          */
[data-superficie="morado"] {
  --color-surface-page:    var(--morado-900);
  --color-surface-card:    var(--morado-800);
  --color-text-primary:    #FFFFFF;
  --color-text-secondary:  var(--morado-200);
  --color-text-marca:      var(--turquesa-200);
  --color-text-enlace:     var(--turquesa-200);
  --color-border-hairline: var(--morado-700);
  --color-accent:          var(--turquesa-200);
  --color-cta:             var(--magenta-500);
  --color-cta-text:        #FFFFFF;
}

[data-superficie="violeta"] {
  --color-surface-page:    var(--violeta-700);
  --color-surface-card:    var(--violeta-800);
  --color-text-primary:    #FFFFFF;
  --color-text-secondary:  var(--violeta-200);
  --color-text-marca:      var(--mostaza-300);
  --color-border-hairline: var(--violeta-600);
  --color-cta:             var(--turquesa-200);
  --color-cta-text:        var(--morado-900);
}