/* ============================================================
   Vintage — tokens
   Paleta extraída de los artifacts de referencia (crema / verde /
   mostaza / terracota). Todo color se define primero en :root y
   sólo se redefine en los bloques de tema. Nunca un color cuya
   única definición viva dentro de un media query.
   ============================================================ */

:root {
  color-scheme: light;

  /* --- superficies --- */
  --cream:        #F7EFDD;
  --cream-deep:   #F0E4C4;
  --papel:        #F3EAD9;   /* el papel de la pantalla de entrar */
  --papel-hoja:   #F8F3E9;   /* la tarjeta, un punto más clara que el papel */
  --papel-campo:  #FCFAF4;
  --surface:      #FFFFFF;
  --surface-2:    #FBF7EC;
  --surface-sunk: #F3ECDB;

  /* --- tinta ---
     Cuatro peldaños, y los tres primeros **llevan texto**, así que los tres
     pasan 4,5:1 sobre cualquiera de las cinco superficies de esta paleta
     —incluida `--cream-deep`, que es la más tostada y la que más aprieta—.
     El cuarto es para lo que no es texto: filetes, galones, iconos de adorno.
     Ahí el listón es 3:1 (WCAG 1.4.11) y lo pasa.

     La escala está **corrida un peldaño** respecto a la original, y eso tiene
     historia: `--ink-muted` valía #8A8270 y daba 3,33:1 sobre crema. Lo llevaba
     `.view-sub`, `.rail-label` y `.empty-sub`, o sea el texto secundario de las
     diecinueve pantallas. Lo evidente —oscurecer sólo ese— lo dejaba a 0,002 de
     luminancia de `--ink-soft`: legible y sin jerarquía, que es cambiar un
     problema por otro. Correr la escala mantiene los cuatro escalones visibles
     y hace legibles los tres que hacen falta. */
  --ink:          #2A2620;   /* 15,04:1 sobre blanco */
  --ink-soft:     #57503F;   /*  8,00:1 */
  --ink-muted:    #6D6556;   /*  5,76:1 — el mínimo que pasa en las cinco */
  --ink-faint:    #8E8261;   /*  3,81:1 — sólo para lo que no es texto */

  /* --- líneas --- */
  --border:       #E4D6AE;
  --border-soft:  #EFE6CE;
  --border-strong:#D3BF8E;

  /* --- verde (color de marca / acción) --- */
  --green:        #2E5443;
  --green-hover:  #244436;
  --green-deep:   #1F3F32;
  --green-soft:   #E5EBE0;
  --green-ink:    #1F3F32;   /* verde legible sobre green-soft */
  --on-green:     #F7EFDD;   /* tinta sobre relleno verde */

  /* --- mostaza (atención / resaltado) --- */
  --mustard:      #E8B93F;
  --mustard-deep: #C99A2E;
  --mustard-soft: #FBF0D4;
  --mustard-ink:  #7A5A12;
  --on-mustard:   #2A2620;
  --marker:       rgba(232, 185, 63, 0.38);

  /* --- terracota (alerta / negativo) --- */
  --terracotta:      #C1694A;
  --terracotta-deep: #A3512F;
  --terracotta-soft: #F5E3DA;
  --terracotta-ink:  #8E4227;
  --on-terracotta:   #F7EFDD;

  /* --- azul apagado (virtual / informativo) --- */
  --slate:      #4A6E86;
  --slate-soft: #E1EAF0;
  --slate-ink:  #2F5063;

  /* --- estados de cita (color por estado, no por profesional) ---
     El estado es lo que da significado al color (regla 5 de la
     constitución), así que **su tinta tiene que leerse sobre su propio
     fondo**. «Cancelada» daba 3,12:1 sobre el suyo y «Disponible» 3,81:1
     sobre blanco: el estado que más se mira de reojo era el menos legible. */
  --st-rese-bg:   #FFEFB8;  --st-rese-bd:   #F2A900;  --st-rese-ink:   #5C3F00;
  --st-prog-bg:   #CDF5DC;  --st-prog-bd:   #12B76A;  --st-prog-ink:   #05442A;
  --st-aten-bg:   #D8E9FF;  --st-aten-bd:   #2E7CF6;  --st-aten-ink:   #0B2F66;
  --st-canc-bg:   #FFE3E0;  --st-canc-bd:   #E5484D;  --st-canc-ink:   #6B0F14;
  --st-noas-bg:   #EFE3FF;  --st-noas-bd:   #8E4EC6;  --st-noas-ink:   #3F1670;
  --st-disp-bg:   transparent; --st-disp-bd: #D3BF8E; --st-disp-ink:  #6C6658;

  /* --- velos y tintas sobre color ---
     Estaban escritos a mano, y el de los diálogos **dos veces** —en app.css y
     en agenda.css— con lo que cambiar uno dejaba los dos diciendo cosas
     distintas. No se redefinen por tema a propósito: un velo oscurece igual
     con cualquier paleta detrás, y la tinta del avatar va sobre el color de un
     profesional, que es un dato y no una superficie. */
  --scrim:        rgba(42, 38, 32, 0.46);
  --scrim-soft:   rgba(0, 0, 0, 0.18);
  --on-avatar:    #FFFFFF;

  /* --- el trazo del estado ---
     El estado no es una pildora: es una palabra con un brochazo detras, el
     gesto de la clase .mark del prototipo, que llevaba ahi sin que nadie la
     usara. Cada estado trae el suyo, en vez del mostaza unico.

     La opacidad es la mas fuerte que sigue pasando 4,5:1 con su tinta encima,
     medido sobre las siete superficies del tema: al 65% la de "no asistio"
     cae a 3,98:1 y rompe el liston de ADR-020. */
  --st-rese-mk:   rgba(242, 169, 0, 0.55);
  --st-prog-mk:   rgba(18, 183, 106, 0.55);
  --st-aten-mk:   rgba(46, 124, 246, 0.55);
  --st-canc-mk:   rgba(229, 72, 77, 0.55);
  --st-noas-mk:   rgba(142, 78, 198, 0.55);
  --st-reun-mk:   rgba(74, 110, 134, 0.55);

  /* --- sombras --- */
  --sh-xs: 0 1px 2px rgba(42, 38, 32, 0.06);
  --sh-sm: 0 2px 6px -2px rgba(42, 38, 32, 0.14);
  --sh-md: 0 8px 18px -10px rgba(42, 38, 32, 0.24);
  --sh-lg: 0 18px 40px -18px rgba(42, 38, 32, 0.30);
  --sh-modal: 0 28px 60px -20px rgba(42, 38, 32, 0.38);

  /* --- radios --- */
  --r-sm: 7px;
  --r-md: 9px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* --- tipografía --- */
  --font-hand: 'Caveat', 'Segoe Script', cursive;
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* --- métricas del shell --- */
  --rail-w: 78px;
  --menu-w: 224px;
  --topbar-h: 62px;
}

/* Tema oscuro: misma familia cálida invertida, nunca gris azulado.
   Los tokens *-ink se aclaran (son tinta sobre superficie teñida) y
   los rellenos se oscurecen lo justo para que la tinta inversa lea. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --cream:        #1D1A14;
    --cream-deep:   #262118;
  --papel:        #1D1A14;
  --papel-hoja:   #26221B;
  --papel-campo:  #1D1A14;
    --surface:      #26221B;
    --surface-2:    #2C2720;
    --surface-sunk: #201C16;

    --ink:          #F2EADA;
    --ink-soft:     #C4B9A2;
    --ink-muted:    #A2977F;
    --ink-faint:    #766D5B;

    --border:       #3C3327;
    --border-soft:  #322B21;
    --border-strong:#51452F;

    --green:        #528B6C;   /* subido: el botón principal daba 4,12:1 con su tinta */
    --green-hover:  #5C9576;
    --green-deep:   #A6D2B7;
    --green-soft:   #27362D;
    --green-ink:    #A6D2B7;
    --on-green:     #101913;

    --mustard:      #D9AE41;
    --mustard-deep: #E3BE5C;
    --mustard-soft: #372E1B;
    --mustard-ink:  #E7C66B;
    --on-mustard:   #1D1A14;
    --marker:       rgba(217, 174, 65, 0.30);

    --terracotta:      #C67A5C;
    --terracotta-deep: #D68C6E;
    --terracotta-soft: #382620;
    --terracotta-ink:  #E09A7C;
    --on-terracotta:   #1D1A14;

    --slate:      #6E96AC;
    --slate-soft: #222E36;
    --slate-ink:  #97BAD0;

    --st-rese-bg:   #3A2F10;  --st-rese-bd:   #F5B800;  --st-rese-ink:   #FFD65C;
    --st-prog-bg:   #0D3322;  --st-prog-bd:   #2BD47D;  --st-prog-ink:   #A8F0C8;
    --st-aten-bg:   #0F2A4D;  --st-aten-bd:   #4C9AFF;  --st-aten-ink:   #B5D4FF;
    --st-canc-bg:   #43181B;  --st-canc-bd:   #FF6B6B;  --st-canc-ink:   #FFC1C1;
    --st-noas-bg:   #2E1A4A;  --st-noas-bd:   #B77DFF;  --st-noas-ink:   #DCC2FF;
    --st-disp-bg:   transparent; --st-disp-bd: #51452F; --st-disp-ink:  #A2977F;

  /* El trazo, en oscuro: mismo color y menos opacidad. Sobre una superficie
     oscura el 55% se come la tinta clara; al 34% la peor pasa 5,44:1. */
  --st-rese-mk:   rgba(245, 184, 0, 0.34);
  --st-prog-mk:   rgba(43, 212, 125, 0.34);
  --st-aten-mk:   rgba(76, 154, 255, 0.34);
  --st-canc-mk:   rgba(255, 107, 107, 0.34);
  --st-noas-mk:   rgba(183, 125, 255, 0.34);
  --st-reun-mk:   rgba(74, 110, 134, 0.34);


    --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.36);
    --sh-sm: 0 2px 6px -2px rgba(0, 0, 0, 0.46);
    --sh-md: 0 8px 18px -10px rgba(0, 0, 0, 0.58);
    --sh-lg: 0 18px 40px -18px rgba(0, 0, 0, 0.66);
    --sh-modal: 0 28px 60px -20px rgba(0, 0, 0, 0.72);
  }
}

/* El toggle explícito gana en ambas direcciones. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --cream:        #1D1A14;
  --cream-deep:   #262118;
  --papel:        #1D1A14;
  --papel-hoja:   #26221B;
  --papel-campo:  #1D1A14;
  --surface:      #26221B;
  --surface-2:    #2C2720;
  --surface-sunk: #201C16;

  --ink:          #F2EADA;
  --ink-soft:     #C4B9A2;
  --ink-muted:    #A2977F;
  --ink-faint:    #766D5B;

  --border:       #3C3327;
  --border-soft:  #322B21;
  --border-strong:#51452F;

  --green:        #528B6C;   /* subido: el botón principal daba 4,12:1 con su tinta */
  --green-hover:  #5C9576;
  --green-deep:   #A6D2B7;
  --green-soft:   #27362D;
  --green-ink:    #A6D2B7;
  --on-green:     #101913;

  --mustard:      #D9AE41;
  --mustard-deep: #E3BE5C;
  --mustard-soft: #372E1B;
  --mustard-ink:  #E7C66B;
  --on-mustard:   #1D1A14;
  --marker:       rgba(217, 174, 65, 0.30);

  --terracotta:      #C67A5C;
  --terracotta-deep: #D68C6E;
  --terracotta-soft: #382620;
  --terracotta-ink:  #E09A7C;
  --on-terracotta:   #1D1A14;

  --slate:      #6E96AC;
  --slate-soft: #222E36;
  --slate-ink:  #97BAD0;

  --st-rese-bg:   #3A2F10;  --st-rese-bd:   #F5B800;  --st-rese-ink:   #FFD65C;
  --st-prog-bg:   #0D3322;  --st-prog-bd:   #2BD47D;  --st-prog-ink:   #A8F0C8;
  --st-aten-bg:   #0F2A4D;  --st-aten-bd:   #4C9AFF;  --st-aten-ink:   #B5D4FF;
  --st-canc-bg:   #43181B;  --st-canc-bd:   #FF6B6B;  --st-canc-ink:   #FFC1C1;
  --st-noas-bg:   #2E1A4A;  --st-noas-bd:   #B77DFF;  --st-noas-ink:   #DCC2FF;
  --st-disp-bg:   transparent; --st-disp-bd: #51452F; --st-disp-ink:  #A2977F;

  /* El trazo, en oscuro: mismo color y menos opacidad. Sobre una superficie
     oscura el 55% se come la tinta clara; al 34% la peor pasa 5,44:1. */
  --st-rese-mk:   rgba(245, 184, 0, 0.34);
  --st-prog-mk:   rgba(43, 212, 125, 0.34);
  --st-aten-mk:   rgba(76, 154, 255, 0.34);
  --st-canc-mk:   rgba(255, 107, 107, 0.34);
  --st-noas-mk:   rgba(183, 125, 255, 0.34);
  --st-reun-mk:   rgba(74, 110, 134, 0.34);


  --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.36);
  --sh-sm: 0 2px 6px -2px rgba(0, 0, 0, 0.46);
  --sh-md: 0 8px 18px -10px rgba(0, 0, 0, 0.58);
  --sh-lg: 0 18px 40px -18px rgba(0, 0, 0, 0.66);
  --sh-modal: 0 28px 60px -20px rgba(0, 0, 0, 0.72);
}