/* ==========================================================================
   Portal BZ · tokens de diseño
   Extraídos del sitio bzsolutions.cl (repo "Pagina Web BZ Solutions").
   Origen de cada valor: docs/01-DISENO.md. Este archivo es la ÚNICA fuente de
   colores, tipografías, tamaños, radios, sombras y espacios del portal.

   Los nombres de variable son los mismos del sitio (styles/globals.css) para que
   la trazabilidad sea directa. Lo que el sitio no tiene (estados, tema claro
   completo, radios, espacios) va marcado como «derivado» o «propuesto».
   Paleta: solo la del sitio (negro + amarillo BZ).

   Tema: oscuro por defecto (como el sitio). Sigue a prefers-color-scheme y se
   puede forzar con <html data-tema="claro|oscuro"> (assets/tema.js lo guarda).
   ========================================================================== */

/* ---------- Fuentes locales (sin CDN: la CSP solo permite 'self') ---------- */
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-latin.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
/* Cabinet Grotesk: archivo oficial de Fontshare, sin modificar (la licencia ITF FFL
   prohíbe subsetear o convertir; permite autoalojar). Licencias en fonts/LICENSES/. */
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("fonts/CabinetGrotesk-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("fonts/DMMono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("fonts/DMMono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tema oscuro (por defecto) ---------- */
:root,
:root[data-tema="oscuro"] {
  color-scheme: dark;

  /* Fondos — globals.css :root */
  --color-bg:            #0A0A0A;
  --color-bg-secondary:  #111111;
  --color-surface:       #1A1A1A;
  --color-surface-hover: #202020;
  --color-border:        #2A2A2A;
  --color-border-strong: #3A3A3A;   /* derivado: un paso sobre --color-border (inputs, divisores fuertes) */

  /* Texto — globals.css :root */
  --color-text-primary:   #F5F5F0;
  --color-text-secondary: #A0A09A;
  --color-text-muted:     #606060;

  /* Acento — globals.css :root */
  --color-accent:       #E8FF00;   /* amarillo eléctrico BZ: relleno de CTA, foco, selección */
  --color-accent-hover: #D4E800;
  --color-accent-text:  #0A0A0A;   /* texto sobre fondo acento */
  --color-accent-ink:   #E8FF00;   /* derivado: acento usado como tinta (bordes, iconos activos, links) */
  --color-accent-soft:  rgba(232, 255, 0, 0.10);  /* derivado: fondos suaves de estado "activo" */

  /* Estados — propuestos (el sitio no tiene; valores probados en contabilidad-v3, peligro = red-400 del sitio) */
  --color-success:      #3DD68C;
  --color-success-soft: rgba(61, 214, 140, 0.12);
  --color-warning:      #FFB347;
  --color-warning-soft: rgba(255, 179, 71, 0.12);
  --color-danger:       #F87171;   /* text-red-400, el único color de error del sitio */
  --color-danger-soft:  rgba(248, 113, 113, 0.12);
  --color-info:         #6EA8FE;
  --color-info-soft:    rgba(110, 168, 254, 0.12);

  /* Velos y sombras — rgba(10,10,10,.x) del Header/Lightbox; shadow-lg de Tailwind */
  --color-overlay: rgba(10, 10, 10, 0.85);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --shadow-sheet: 0 -10px 30px rgba(0, 0, 0, 0.6);   /* derivado: hoja inferior */
}

/* ---------- Tema claro ---------- */
/* Base del sitio: --color-bg-light #F8F7F2 y --color-text-on-light #0A0A0A (secciones claras).
   El resto se deriva de esa pareja. El amarillo sobre crema no tiene contraste para texto:
   se mantiene como relleno (botón primario, foco) y la «tinta» de acento pasa a negro. */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) {
    color-scheme: light;
    --color-bg:            #F8F7F2;
    --color-bg-secondary:  #F0EFE8;
    --color-surface:       #FFFFFF;
    --color-surface-hover: #F3F2EC;
    --color-border:        #E2E0D8;
    --color-border-strong: #C9C7BE;
    --color-text-primary:   #0A0A0A;
    --color-text-secondary: #55554F;
    --color-text-muted:     #85857E;
    --color-accent-ink:   #0A0A0A;
    --color-accent-soft:  rgba(232, 255, 0, 0.45);
    --color-success:      #15803D;
    --color-success-soft: rgba(21, 128, 61, 0.10);
    --color-warning:      #B45309;
    --color-warning-soft: rgba(180, 83, 9, 0.10);
    --color-danger:       #DC2626;
    --color-danger-soft:  rgba(220, 38, 38, 0.08);
    --color-info:         #1D4ED8;
    --color-info-soft:    rgba(29, 78, 216, 0.08);
    --color-overlay: rgba(10, 10, 10, 0.5);
    --shadow-lg: 0 10px 15px -3px rgba(10, 10, 10, 0.10), 0 4px 6px -4px rgba(10, 10, 10, 0.10);
    --shadow-sheet: 0 -10px 30px rgba(10, 10, 10, 0.15);
  }
}
:root[data-tema="claro"] {
  color-scheme: light;
  --color-bg:            #F8F7F2;
  --color-bg-secondary:  #F0EFE8;
  --color-surface:       #FFFFFF;
  --color-surface-hover: #F3F2EC;
  --color-border:        #E2E0D8;
  --color-border-strong: #C9C7BE;
  --color-text-primary:   #0A0A0A;
  --color-text-secondary: #55554F;
  --color-text-muted:     #85857E;
  --color-accent-ink:   #0A0A0A;
  --color-accent-soft:  rgba(232, 255, 0, 0.45);
  --color-success:      #15803D;
  --color-success-soft: rgba(21, 128, 61, 0.10);
  --color-warning:      #B45309;
  --color-warning-soft: rgba(180, 83, 9, 0.10);
  --color-danger:       #DC2626;
  --color-danger-soft:  rgba(220, 38, 38, 0.08);
  --color-info:         #1D4ED8;
  --color-info-soft:    rgba(29, 78, 216, 0.08);
  --color-overlay: rgba(10, 10, 10, 0.5);
  --shadow-lg: 0 10px 15px -3px rgba(10, 10, 10, 0.10), 0 4px 6px -4px rgba(10, 10, 10, 0.10);
  --shadow-sheet: 0 -10px 30px rgba(10, 10, 10, 0.15);
}

/* ---------- Tokens que no cambian con el tema ---------- */
:root {
  /* Tipografía — las mismas del sitio (layout.tsx + globals.css), servidas locales.
     Son también las fuentes de los PDFs del portal (Fase 2). */
  --font-display: "Cabinet Grotesk", system-ui, sans-serif;
  --font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Pesos — los que usan los componentes del sitio */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;   /* botones, nav (font-semibold) */
  --weight-bold:      700;
  --weight-display:   800;   /* font-extrabold: títulos del sitio */

  /* Escala de texto — globals.css :root (idéntica) */
  --text-xs:   0.75rem;   /* 12 — labels, badges */
  --text-sm:   0.875rem;  /* 14 — meta, captions */
  --text-base: 1rem;      /* 16 — body */
  --text-lg:   1.25rem;   /* 20 — lead */
  --text-xl:   1.5rem;    /* 24 — subtítulos */
  --text-2xl:  2rem;      /* 32 — títulos de sección */
  --text-3xl:  3rem;      /* 48 — headlines desktop */
  --text-4xl:  4.5rem;    /* 72 — hero (no se usa en la app) */
  --text-5xl:  7rem;      /* 112 — display (no se usa en la app) */

  /* Interlineado y tracking — globals.css (body 1.6, p 1.7, h 1.1) y clases tracking-[…] */
  --leading-tight: 1.1;
  --leading-body:  1.6;
  --leading-prose: 1.7;
  --tracking-tight: -0.025em;  /* tracking-tight del logo */
  --tracking-label: 0.2em;     /* tracking-[0.2em]: etiquetas mono en mayúsculas (el más usado) */
  --tracking-eyebrow: 0.25em;  /* tracking-[0.25em]: eyebrow en acento */

  /* Espacios — escala de 4 px de Tailwind (la que usa el sitio) */
  --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 = --gutter-mobile */
  --space-8: 2rem;     /* 32 = --gutter-tablet */
  --space-10: 2.5rem;  /* 40 = py-10, padding de secciones del sitio */
  --space-12: 3rem;    /* 48 = --gutter-desktop */
  --space-16: 4rem;    /* 64 */

  /* Layout — globals.css :root */
  --max-width-content: 1280px;
  --gutter-mobile:  24px;
  --gutter-tablet:  32px;
  --gutter-desktop: 48px;
  --header-height: 64px;        /* h-16 del Header (72px desde 768) */
  --sidebar-width: 248px;       /* derivado: barra lateral del admin */
  --tabbar-height: 64px;        /* derivado: barra inferior en móvil */
  /* Zonas seguras de iOS (notch, Dynamic Island, barra de estado): con la app a pantalla
     completa (black-translucent) el contenido pasa por debajo de la hora y la batería. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* Breakpoints (no se pueden usar en @media; referencia): 375 · 768 · 1280 · 1536 — tailwind.config.ts */

  /* Forma — el sitio es de esquinas casi rectas: rounded-sm (2px) en botones, 0 en cards, full en puntos */
  --radius-none: 0;
  --radius-sm:   2px;      /* rounded-sm: botones, inputs, badges */
  --radius-full: 9999px;   /* rounded-full: puntos de estado, avatar */

  /* Movimiento — duration-200 (77 usos) y duration-300; solo transform y opacity */
  --duration:      200ms;
  --duration-slow: 300ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);   /* ease por defecto de Tailwind */

  /* Foco — globals.css :focus-visible */
  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;

  /* El QR del alta de 2FA necesita fondo blanco real en ambos temas para que el teléfono lo lea */
  --color-qr-bg: #FFFFFF;

  /* Capas */
  --z-nav: 40;
  --z-overlay: 50;
  --z-toast: 60;
}

@media (min-width: 768px) {
  :root { --header-height: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration: 0ms; --duration-slow: 0ms; }
}