/* ===========================================================================
   tokens.css — Variables de diseño de la landing de elPOS
   Origen: PLAN.md §6 (brand README + steering tech "Identidad visual").
   Lo marcado [DISEÑO] son neutrales derivados (escala slate) o decisiones del plan.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Tipografía: Inter preferida, system fonts de respaldo.
   El plan (§6.2) pide auto-hospedar Inter variable (OFL). Si los archivos
   .woff2 no están disponibles NO se inventan: se usa solo la pila --font-sans
   (Inter no instalada cae a system fonts). Ver README.md.
   Para añadir Inter más adelante, copiar los .woff2 a assets/fonts/ y
   descomentar el @font-face de abajo.
   --------------------------------------------------------------------------- */
/* @font-face {
   font-family: "Inter";
   font-style: normal;
   font-weight: 100 900;
   font-display: swap;
   src: url("../assets/fonts/Inter-Variable-latin.woff2") format("woff2-variations"),
        url("../assets/fonts/Inter-Variable-latin.woff2") format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                  U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                  U+2212, U+2215, U+FEFF, U+FFFD;
} */

/* ===========================================================================
   :root — Tema CLARO (por defecto) + tokens de marca y de layout (constantes)
   =========================================================================== */
:root {
  color-scheme: light dark;

  /* --- Marca [BRAND] (constantes en ambos temas) --- */
  --brand-300: #34D399; /* solo oscuro; viene de elpos-logo-dark.svg */
  --brand-400: #10B981; /* esmeralda claro */
  --brand-500: #059669; /* esmeralda corporativo */
  --brand-600: #047857; /* esmeralda oscuro / hover [BRAND] */
  --brand-700: #065F46; /* [DISEÑO] pulsado del botón (un paso más oscuro) */
  --ai-300: #A5B4FC;    /* solo oscuro; viene de elpos-logo-dark.svg */
  --ai-400: #818CF8;    /* índigo claro IA */
  --ai-500: #6366F1;    /* índigo IA */

  /* --- Estados [BRAND] --- */
  --state-online: #10B981;
  --state-lan: #F59E0B;
  --state-error: #EF4444;

  /* --- Tema CLARO (superficies, texto, bordes) --- */
  --bg: #FFFFFF;
  --bg-subtle: #F8FAFC;          /* [DISEÑO] */
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --border: #E2E8F0;            /* [DISEÑO] */
  --text: #0F172A;              /* 17.85:1 sobre blanco; color del wordmark "el" */
  --text-muted: #475569;        /* 7.58:1 sobre blanco [DISEÑO] */
  --text-subtle: #64748B;       /* 4.76:1; color de ".co" — solo texto ≥ 14 px */
  --link: #047857;             /* 5.48:1 */
  --btn-bg: #047857;
  --btn-bg-hover: #065F46;
  --btn-text: #FFFFFF;
  --accent-text: #047857;
  --ai-fill: #6366F1;          /* solo rellenos/iconos/bordes; texto de insignia usa --text */
  --ai-soft: #EEF2FF;         /* [DISEÑO] fondo de insignia IA */
  --brand-soft: #ECFDF5;      /* mismo tono que las líneas del recibo en el logo */
  --warn-text: #B45309;       /* 5.02:1 sobre blanco [DISEÑO] texto de aviso */
  --error-text: #B91C1C;      /* 6.47:1 sobre blanco [DISEÑO] texto de error */
  --focus: #4F46E5;          /* [DISEÑO] anillo de foco, 6.29:1 sobre blanco */
  --brand-grad: linear-gradient(135deg, #10B981 0%, #047857 100%);
  --hero-wash: radial-gradient(60% 60% at 80% 0%, rgba(16, 185, 129, 0.1), transparent 70%);

  /* --- Sombras CLARO [DISEÑO] --- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);

  /* --- Tipografía (§6.2) --- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --fs-hero: clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --lh-text: 1.6;
  --lh-title: 1.2;
  --lh-hero: 1.05;

  --tracking-tight: -0.02em;
  --measure: 65ch;

  /* --- Espaciado base 4 px (§6.3) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* --- Radios (§6.4) --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* --- Layout (§4.1) --- */
  --container-max: 1200px;
  --gutter: 16px;             /* móvil; 24 a ≥768, 32 a ≥1024 (ver base.css) */
  --header-h: 64px;          /* alto del header sticky; para scroll-margin-top */
  --section-py: 64px;       /* padding vertical de sección; 96 a ≥1024 */
  --target-min: 44px;      /* objetivo táctil mínimo (§4.7) */
}

/* ===========================================================================
   Tema OSCURO — manual (data-theme="dark")
   =========================================================================== */
:root[data-theme="dark"] {
  --bg: #0B1120;              /* fondo del logo oscuro [BRAND] */
  --bg-subtle: #0F172A;
  --surface: #111827;          /* [DISEÑO] */
  --surface-raised: #162033;   /* [DISEÑO] */
  --border: #1E293B;          /* [DISEÑO] */
  --text: #F1F5F9;           /* 17.19:1 sobre --bg; color de "el" en el logo oscuro */
  --text-muted: #94A3B8;     /* 7.34:1 sobre --bg */
  --text-subtle: #94A3B8;
  --link: #34D399;           /* 9.79:1 */
  --btn-bg: #10B981;         /* 7.42:1 con texto #0B1120 */
  --btn-bg-hover: #34D399;
  --btn-text: #0B1120;
  --accent-text: #34D399;
  --ai-fill: #818CF8;
  --ai-soft: rgba(129, 140, 248, 0.14);
  --brand-soft: rgba(16, 185, 129, 0.12);
  --warn-text: #FBBF24;      /* 11.28:1 sobre --bg */
  --error-text: #FCA5A5;    /* 9.92:1 sobre --bg */
  --focus: #A5B4FC;        /* 9.45:1 sobre --bg */
  --hero-wash: radial-gradient(60% 60% at 80% 0%, rgba(52, 211, 153, 0.14), transparent 70%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
}

/* ===========================================================================
   Tema OSCURO — por preferencia del sistema (si el usuario no eligió)
   =========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1120;
    --bg-subtle: #0F172A;
    --surface: #111827;
    --surface-raised: #162033;
    --border: #1E293B;
    --text: #F1F5F9;
    --text-muted: #94A3B8;
    --text-subtle: #94A3B8;
    --link: #34D399;
    --btn-bg: #10B981;
    --btn-bg-hover: #34D399;
    --btn-text: #0B1120;
    --accent-text: #34D399;
    --ai-fill: #818CF8;
    --ai-soft: rgba(129, 140, 248, 0.14);
    --brand-soft: rgba(16, 185, 129, 0.12);
    --warn-text: #FBBF24;
    --error-text: #FCA5A5;
    --focus: #A5B4FC;
    --hero-wash: radial-gradient(60% 60% at 80% 0%, rgba(52, 211, 153, 0.14), transparent 70%);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
  }
}