/* ============================================================
   Console CM Vida Plena — tokens.css
   Capa de tokens para la app interna (admin.cmvidaplena.cl).

   Hereda la PALETA DE MARCA del Site (Site/src/styles/tokens.css)
   y añade encima una capa "console": escala de grises completa,
   spacing denso, radios cuadrados, semánticos con -bg/-text y
   modo oscuro dual.

   Diferencia deliberada vs. el sitio de marketing:
   - Solo Hanken Grotesk (sin Baloo 2).
   - Esquinas cuadradas (4 / 8 / 12) en vez de pills muy redondeados.
   - Mayor densidad y una escala de grises de trabajo.
   ============================================================ */

:root {
  /* ---------------------------------------------------------
     MARCA — heredada del Site (mismos valores que tokens.css)
     --------------------------------------------------------- */
  --green:        #56C72A;   /* acción primaria / éxito */
  --green-600:    #46A91E;
  --green-700:    #3F9D18;
  --green-800:    #357D17;   /* verde sobre fondo claro (AA) */
  --cyan:         #00AAF0;   /* marca / navegación / info / links */
  --cyan-600:     #0090CC;
  --cyan-700:     #0481B6;   /* cyan sobre fondo claro (AA) */
  --ink:          #16242E;   /* texto fuerte / superficies oscuras */
  --ink-deep:     #0E2230;   /* sidebar / fondo profundo */
  --whatsapp:     #25D366;

  /* ---------------------------------------------------------
     GRISES — escala de trabajo (tinte slate frío, ink = 900)
     --------------------------------------------------------- */
  --gray-50:  #F6F8F9;
  --gray-100: #ECEFF2;
  --gray-200: #DFE3E8;
  --gray-300: #CBD2D9;
  --gray-400: #A6B0BA;
  --gray-500: #7C8893;
  --gray-600: #5A6670;
  --gray-700: #404B54;
  --gray-800: #2A333B;
  --gray-900: #16242E;

  /* ---------------------------------------------------------
     SUPERFICIES Y TEXTO (alias semánticos · LIGHT)
     Se reasignan en modo oscuro más abajo.
     --------------------------------------------------------- */
  --bg:             var(--gray-50);   /* fondo de la app */
  --surface:        #FFFFFF;          /* cards, paneles */
  --surface-2:      var(--gray-100);  /* zebra, hover suave, raised */
  --surface-3:      var(--gray-200);
  --border:         var(--gray-200);
  --border-strong:  var(--gray-300);

  --text:        #232E37;   /* primario (console: más fuerte que web) */
  --text-soft:   #5A6670;   /* secundario */
  --text-muted:  #7C8893;   /* terciario / placeholders / captions */
  --text-inverse:#FFFFFF;   /* sobre superficies oscuras / botones */

  /* enlaces */
  --link:        var(--cyan-700);
  --link-hover:  var(--cyan);

  /* ---------------------------------------------------------
     SEMÁNTICOS — color base + -bg (relleno suave) + -text (AA)
     --------------------------------------------------------- */
  --success:       #46A91E;
  --success-bg:    #EAF7E2;
  --success-text:  #2E6B12;

  --warn:          #F4A52A;
  --warn-bg:       #FFF4E0;
  --warn-text:     #8A5800;

  --error:         #E0341E;
  --error-bg:      #FDECEA;
  --error-text:    #B02714;

  --info:          #00AAF0;
  --info-bg:       #E5F6FE;
  --info-text:     #0369A1;

  /* paleta categórica para data-viz (empieza por marca) */
  --chart-1: #00AAF0;
  --chart-2: #56C72A;
  --chart-3: #0481B6;
  --chart-4: #F4A52A;
  --chart-5: #357D17;
  --chart-6: #7A5AF0;
  --chart-7: #E0341E;
  --chart-8: #9AA0A6;

  /* ---------------------------------------------------------
     TIPOGRAFÍA — solo Hanken Grotesk
     --------------------------------------------------------- */
  --font: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* pesos */
  --fw-regular: 400;   /* body */
  --fw-medium:  500;   /* énfasis / labels */
  --fw-semibold:600;   /* títulos de sección, th */
  --fw-bold:    700;   /* headings principales, KPI */

  /* escala (app base = 14px) */
  --text-xs:   12px;   /* captions, badges */
  --text-sm:   13px;   /* tablas densas, meta */
  --text-base: 14px;   /* cuerpo de la app */
  --text-md:   15px;
  --text-lg:   16px;   /* títulos de card */
  --text-xl:   18px;
  --text-2xl:  22px;   /* títulos de página */
  --text-3xl:  28px;   /* KPI grande */

  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-normal: 1.55;

  /* ---------------------------------------------------------
     SPACING — base 4px (denso)
     --------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;

  /* ---------------------------------------------------------
     RADIOS — cuadrados (pill solo para chips/badges)
     --------------------------------------------------------- */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-lg:  12px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------
     SOMBRAS — tinte slate, nunca negro puro
     --------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(16, 42, 67, .08);
  --shadow:    0 2px 8px rgba(16, 42, 67, .10);
  --shadow-md: 0 6px 20px rgba(16, 42, 67, .12);
  --shadow-lg: 0 16px 40px rgba(16, 42, 67, .20);

  /* ---------------------------------------------------------
     FOCO — anillo cyan visible en todo interactivo
     --------------------------------------------------------- */
  --focus-ring:  0 0 0 3px rgba(0, 170, 240, .35);
  --focus-color: var(--cyan);

  /* ---------------------------------------------------------
     LAYOUT
     --------------------------------------------------------- */
  --sidebar-w:           240px;
  --sidebar-collapsed-w: 64px;
  --topbar-h:            56px;
  --content-max:         1320px;

  /* ---------------------------------------------------------
     MOVIMIENTO
     --------------------------------------------------------- */
  --t-micro: 140ms ease;
  --t-ui:    220ms ease;
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  /* ---------------------------------------------------------
     Z-INDEX
     --------------------------------------------------------- */
  --z-base:           1;
  --z-sticky:         100;
  --z-sidebar:        200;
  --z-dropdown:       1000;
  --z-modal-backdrop: 1040;
  --z-modal:          1050;
  --z-toast:          1080;
  --z-command:        1090;
}

/* ============================================================
   MODO OSCURO
   Default = auto (sigue al sistema) salvo override explícito.
   - [data-theme="dark"]  → fuerza oscuro
   - [data-theme="light"] → fuerza claro (gana sobre el media query)
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0E1519;
    --surface:       #16222B;
    --surface-2:     #1E2C36;
    --surface-3:     #263643;
    --border:        #2A3A45;
    --border-strong: #3A4D5A;

    --text:         #E6EDF1;
    --text-soft:    #AEBAC3;
    --text-muted:   #7C8893;
    --text-inverse: #16242E;

    --link:       #7FE0FF;
    --link-hover: #A8ECFF;

    --success:      #5CC72E;
    --success-bg:   #15301B;
    --success-text: #7CE6A6;

    --warn:      #F4A52A;
    --warn-bg:   #33260D;
    --warn-text: #F4C46A;

    --error:      #F0533E;
    --error-bg:   #3A1714;
    --error-text: #F4A79B;

    --info:      #36BCF7;
    --info-bg:   #0A2A38;
    --info-text: #7FE0FF;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
    --shadow:    0 2px 10px rgba(0, 0, 0, .45);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .55);
    --shadow-lg: 0 18px 44px rgba(0, 0, 0, .65);

    --focus-ring: 0 0 0 3px rgba(54, 188, 247, .45);
  }
}

:root[data-theme="dark"] {
  --bg:            #0E1519;
  --surface:       #16222B;
  --surface-2:     #1E2C36;
  --surface-3:     #263643;
  --border:        #2A3A45;
  --border-strong: #3A4D5A;

  --text:         #E6EDF1;
  --text-soft:    #AEBAC3;
  --text-muted:   #7C8893;
  --text-inverse: #16242E;

  --link:       #7FE0FF;
  --link-hover: #A8ECFF;

  --success:      #5CC72E;
  --success-bg:   #15301B;
  --success-text: #7CE6A6;

  --warn:      #F4A52A;
  --warn-bg:   #33260D;
  --warn-text: #F4C46A;

  --error:      #F0533E;
  --error-bg:   #3A1714;
  --error-text: #F4A79B;

  --info:      #36BCF7;
  --info-bg:   #0A2A38;
  --info-text: #7FE0FF;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow:    0 2px 10px rgba(0, 0, 0, .45);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .55);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, .65);

  --focus-ring: 0 0 0 3px rgba(54, 188, 247, .45);
}