/* ============================================================
   Sesiona — tokens.css
   Fundación del Design System · v1.0
   ----------------------------------------------------------
   Archivo CSS nativo. Todo en :root.
   Sin @import, sin nesting, sin Sass.
   Lincar con <link rel="stylesheet" href="tokens.css">
   ----------------------------------------------------------
   Direcciones visuales:
     :root                         → Suave moderno (default)
     :root[data-theme="editorial"] → Editorial cálido
     :root[data-theme="clinico"]   → Clínico claro
   ============================================================ */

:root {

  /* ===========================================================
     1 · COLOR — Escalas primitivas (no usar directo en UI)
     =========================================================== */

  /* Cream / Sand — fondos cálidos */
  --cream-50:   #FBF9F5;
  --cream-100:  #F7F4EF;
  --cream-200:  #EDE8E0;
  --cream-300:  #E5DED4;

  --sand-200:   #E8E1D6;
  --sand-300:   #E0D9D0;
  --sand-400:   #CFC5B8;

  /* Green — primario de marca */
  --green-50:   #E8F4ED;
  --green-100:  #D1E9DA;
  --green-200:  #A6D1B5;
  --green-300:  #6FB089;
  --green-400:  #4A8C68;
  --green-500:  #2D6A4F;
  --green-600:  #235540;
  --green-700:  #1B4232;
  --green-800:  #133024;
  --green-900:  #0B1F16;

  /* Terra — cálido / énfasis humano */
  --terra-50:   #FBEFE8;
  --terra-100:  #F5DACA;
  --terra-200:  #EAB59A;
  --terra-300:  #DA9272;
  --terra-400:  #C4775A;
  --terra-500:  #B05E42;
  --terra-600:  #8E4630;
  --terra-700:  #6E3422;

  /* Ink — texto, tinta cálida */
  --ink-900:    #1A1714;
  --ink-800:    #2E2925;
  --ink-700:    #5C534E;
  --ink-600:    #7A7470;
  --ink-500:    #8C8480;
  --ink-400:    #B0A9A2;
  --ink-300:    #C9C3BD;

  /* Event colors — observadas en agenda */
  --color-event-session:     #2A3A8A;
  --color-event-confirmed:   var(--green-500);
  --color-event-break:       var(--terra-400);
  --color-event-institution: #9B7BC9;

  /* Status / semantic raw */
  --color-success:   var(--green-500);
  --color-warning:   #C28A2A;
  --color-danger:    #B5453A;
  --color-info:      #3D5BA9;

  --color-success-soft: var(--green-50);
  --color-warning-soft: #FAEFD6;
  --color-danger-soft:  #FAE3DF;
  --color-info-soft:    #E4E8F5;


  /* ===========================================================
     2 · COLOR — Tokens semánticos (usar en componentes)
     =========================================================== */

  /* Fondos / superficies */
  --bg:              var(--cream-50);
  --bg-2:            #F4EFE6;
  --bg-sunken:       var(--cream-100);
  --surface:         #FFFFFF;
  --surface-2:       var(--cream-50);
  --surface-raised:  #FFFFFF;
  --overlay:         rgba(26, 23, 20, 0.45);
  --scrim:           rgba(26, 23, 20, 0.65);

  /* Texto */
  --text:            var(--ink-900);
  --text-2:          var(--ink-700);
  --text-3:          var(--ink-600);
  --text-muted:      var(--ink-500);
  --text-disabled:   var(--ink-400);
  --text-on-primary: #FFFFFF;
  --text-on-accent:  #FFFFFF;
  --text-link:       var(--terra-500);
  --text-link-hover: var(--terra-600);

  /* Bordes */
  --border:          var(--sand-200);
  --border-2:        var(--cream-300);
  --border-strong:   var(--ink-300);
  --border-focus:    var(--green-500);
  --divider:         var(--cream-300);

  /* Primario (verde) */
  --primary:         var(--green-500);
  --primary-hover:   var(--green-600);
  --primary-active:  var(--green-700);
  --primary-soft:    #EAF2EC;
  --primary-soft-2:  var(--green-100);
  --primary-text-on: #FFFFFF;

  /* Acento (terracota) — uso parsimonioso: énfasis humano, italics, badges cálidos */
  --accent:          var(--terra-400);
  --accent-hover:    var(--terra-500);
  --accent-active:   var(--terra-600);
  --accent-soft:     var(--terra-50);
  --accent-soft-2:   var(--terra-100);
  --accent-text-on:  #FFFFFF;

  /* Estados */
  --success:         var(--color-success);
  --success-soft:    var(--color-success-soft);
  --success-text:    var(--green-700);

  --warning:         var(--color-warning);
  --warning-soft:    var(--color-warning-soft);
  --warning-text:    #7A560E;

  --danger:          var(--color-danger);
  --danger-soft:     var(--color-danger-soft);
  --danger-text:     #6E2620;

  --info:            var(--color-info);
  --info-soft:       var(--color-info-soft);
  --info-text:       #29407A;

  /* Eventos / agenda */
  --event-session-bg:        var(--color-event-session);
  --event-session-fg:        #FFFFFF;
  --event-confirmed-bg:      var(--green-500);
  --event-confirmed-fg:      #FFFFFF;
  --event-break-bg:          var(--terra-400);
  --event-break-fg:          #FFFFFF;
  --event-institution-bg:    var(--color-event-institution);
  --event-institution-fg:    #FFFFFF;
  --event-tentative-bg:      var(--cream-200);
  --event-tentative-fg:      var(--ink-700);
  --event-grid-line:         var(--sand-300);

  /* Registro emocional — 4 cuadrantes (de la pantalla "Elige tu emoción") */
  --mood-redzone-bg:   #FDE8E0;
  --mood-redzone-fg:   #B5453A;
  --mood-redzone-br:   #F2C6B4;

  --mood-bluezone-bg:  #E5EEF6;
  --mood-bluezone-fg:  #36629A;
  --mood-bluezone-br:  #C0D6E8;

  --mood-yellowzone-bg:#FBF1D3;
  --mood-yellowzone-fg:#8A6818;
  --mood-yellowzone-br:#EBD9A2;

  --mood-greenzone-bg: var(--green-50);
  --mood-greenzone-fg: var(--green-700);
  --mood-greenzone-br: var(--green-100);


  /* ===========================================================
     3 · TIPOGRAFÍA
     =========================================================== */

  /* Familias */
  --font-display: "Fraunces", "Source Serif 4", Georgia, serif;
  --font-body:    "DM Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Escala — mobile first, 1rem = 16px */
  --text-2xs:  0.6875rem;  /* 11 — micro caption */
  --text-xs:   0.75rem;    /* 12 — caption / eyebrow */
  --text-sm:   0.875rem;   /* 14 — small body / meta */
  --text-base: 1rem;       /* 16 — body */
  --text-md:   1.0625rem;  /* 17 — body cómodo */
  --text-lg:   1.25rem;    /* 20 — subhead */
  --text-xl:   1.5rem;     /* 24 — h4 / card title */
  --text-2xl:  1.875rem;   /* 30 — h3 */
  --text-3xl:  2.25rem;    /* 36 — h2 */
  --text-4xl:  3rem;       /* 48 — h1 mobile */
  --text-5xl:  3.75rem;    /* 60 — display */

  /* Fluid display — para landing/hero */
  --text-display: clamp(2.5rem, 6vw + 1rem, 4.75rem);

  /* Pesos */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Pesos por rol — facilita override por dirección */
  --weight-body:     400;
  --weight-body-em:  500;
  --weight-display:  600;
  --weight-label:    500;

  /* Line height */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-base:   1.5;
  --leading-relaxed:1.65;
  --leading-loose:  1.8;

  /* Tracking */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-base:    0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.12em;


  /* ===========================================================
     4 · ESPACIADO — base 4px
     =========================================================== */
  --space-0:   0;
  --space-px:  1px;
  --space-1:   0.25rem;   /* 4 */
  --space-2:   0.5rem;    /* 8 */
  --space-3:   0.75rem;   /* 12 */
  --space-4:   1rem;      /* 16 */
  --space-5:   1.25rem;   /* 20 */
  --space-6:   1.5rem;    /* 24 */
  --space-7:   2rem;      /* 32 */
  --space-8:   2.5rem;    /* 40 */
  --space-9:   3rem;      /* 48 */
  --space-10:  4rem;      /* 64 */
  --space-11:  5rem;      /* 80 */
  --space-12:  6rem;      /* 96 */
  --space-13:  8rem;      /* 128 */

  /* Gutter / container */
  --gutter-mobile:  1rem;
  --gutter-tablet:  1.5rem;
  --gutter-desktop: 2rem;

  --container-sm:  480px;
  --container-md:  720px;
  --container-lg:  960px;
  --container-xl:  1200px;


  /* ===========================================================
     5 · RADIOS — calídos y generosos (Suave default)
     =========================================================== */
  --radius-xs:    6px;
  --radius-sm:    12px;
  --radius-md:    16px;   /* default cards, inputs */
  --radius-lg:    22px;   /* cards grandes, sheets */
  --radius-xl:    28px;
  --radius-2xl:   36px;
  --radius-pill:  999px;
  --radius-circle:50%;

  /* Border width */
  --border-w:        1px;
  --border-w-strong: 1.5px;
  --border-w-focus:  2px;


  /* ===========================================================
     6 · SOMBRAS — cálidas, dispersas, baja opacidad (Suave)
     =========================================================== */
  --shadow-xs:  0 1px 2px rgba(26, 23, 20, 0.04);
  --shadow-sm:  0 2px 8px rgba(26, 23, 20, 0.04);
  --shadow-md:  0 6px 20px rgba(26, 23, 20, 0.06),
                0 2px 6px rgba(26, 23, 20, 0.04);
  --shadow-lg:  0 12px 32px rgba(26, 23, 20, 0.08),
                0 4px 10px rgba(26, 23, 20, 0.05);
  --shadow-xl:  0 20px 48px rgba(26, 23, 20, 0.10),
                0 6px 14px rgba(26, 23, 20, 0.06);

  --shadow-focus:     0 0 0 3px rgba(45, 106, 79, 0.22);
  --shadow-focus-err: 0 0 0 3px rgba(181, 69, 58, 0.22);
  --shadow-inset:     inset 0 1px 2px rgba(26, 23, 20, 0.05);


  /* ===========================================================
     7 · TOUCH / TAMAÑOS MÍNIMOS
     =========================================================== */
  --touch-min:      44px;   /* mínimo accesible */
  --touch-comfort:  48px;
  --touch-large:    56px;

  --control-h-sm: 36px;
  --control-h-md: 44px;
  --control-h-lg: 52px;


  /* ===========================================================
     8 · MOTION
     =========================================================== */
  --duration-instant: 80ms;
  --duration-fast:    140ms;
  --duration-base:    220ms;
  --duration-slow:    340ms;
  --duration-deliberate: 520ms;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);


  /* ===========================================================
     9 · Z-INDEX
     =========================================================== */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   1500;
  --z-tooltip: 2000;


  /* ===========================================================
     10 · BREAKPOINTS (referencia — usar en media queries)
     =========================================================== */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;


  /* ===========================================================
     11 · APP — variantes por subdominio (opt-in con data-app)
     -----------------------------------------------------------
     Permite micro-diferencias de tono sin romper el sistema.
     Cada app sigue siendo Sesiona; sólo cambia el acento
     dominante de su superficie.
     =========================================================== */
  --app-accent:      var(--primary);   /* terapeuta (default) */
  --app-accent-soft: var(--primary-soft);

}


/* ============================================================
   DIRECCIÓN · Editorial cálido (variante)
   Radios más apretados, pesos más fuertes, sombras ligeramente
   más definidas. Link en verde marca, body en Inter.
   ============================================================ */
:root[data-theme="editorial"] {
  --font-body:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --weight-body:     400;
  --weight-body-em:  500;
  --weight-display:  700;
  --weight-label:    600;

  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    20px;
  --radius-2xl:   28px;

  --shadow-sm:    0 2px 6px rgba(26, 23, 20, 0.05),
                  0 1px 2px rgba(26, 23, 20, 0.04);
  --shadow-md:    0 4px 12px rgba(26, 23, 20, 0.06),
                  0 2px 4px rgba(26, 23, 20, 0.04);
  --shadow-lg:    0 8px 24px rgba(26, 23, 20, 0.08),
                  0 2px 6px rgba(26, 23, 20, 0.04);

  --bg:           var(--cream-100);
  --bg-2:         var(--cream-200);
  --border:       var(--sand-300);

  --primary-soft: var(--green-50);
  --text-link:    var(--green-600);
  --text-link-hover: var(--green-700);
}


/* ============================================================
   DIRECCIÓN · Clínico claro (variante)
   Densidad alta, sin serif, radios apretados, terra reservado.
   ============================================================ */
:root[data-theme="clinico"] {
  --font-display:    "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --weight-display:  700;
  --weight-body:     400;
  --weight-label:    600;
  --tracking-tight:  -0.01em;

  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-2xl:  16px;

  --space-4:     0.875rem;
  --space-6:     1.25rem;
  --space-7:     1.75rem;

  --shadow-sm:   0 1px 2px rgba(26, 23, 20, 0.05);
  --shadow-md:   0 2px 8px rgba(26, 23, 20, 0.06);
  --shadow-lg:   0 4px 16px rgba(26, 23, 20, 0.08);

  --bg:          var(--cream-50);
  --bg-2:        var(--cream-100);
  --border:      var(--sand-300);
  --border-2:    var(--cream-300);

  --primary-soft: var(--green-50);
  --text-link:    var(--green-600);
  --text-link-hover: var(--green-700);
  --accent:      var(--terra-500);
}


/* ============================================================
   APP — overrides opt-in por subdominio
   Aplicar en <body data-app="terapeuta|paciente|institucion">
   ============================================================ */
[data-app="terapeuta"]   { --app-accent: var(--green-500);  --app-accent-soft: var(--green-50);  }
[data-app="paciente"]    { --app-accent: var(--terra-400);  --app-accent-soft: var(--terra-50);  }
[data-app="institucion"] { --app-accent: var(--color-event-institution); --app-accent-soft: #EFE7F7; }