:root {
    /* ─── BRAND COLORS — chatlar.com ──────────────────────────────────
       Paleta "Mirage" — sobria, profesional, con acento naranja para CTAs.
       Definida 2026-06-25 en docs/PROJECT-BRIEF.md §9.

       Mirage      #16232A  Texto, botones primarios
       Blaze       #FF5B04  CTA crítico (handover, conectar cuenta, aplicar)
       Deep Sea    #075056  Acento secundario (links, badges, success)
       Wild Sand   #E4EEF0  Fondos muted, hover de cards
    ─────────────────────────────────────────────────────────────── */

    /* Surfaces */
    --color-bg:           #ffffff;
    --color-canvas:       #F4F5F7;  /* Fondo del shell, entre las islas */
    --color-bg-muted:     #E4EEF0;  /* Wild Sand — hover de cards, badges */
    --color-surface:      #ffffff;
    --color-border:       #D5DFE2;
    --color-border-soft:  #EEF3F5;

    /* Text */
    --color-text:         #16232A;  /* Mirage */
    --color-text-muted:   #4A5A65;
    --color-text-soft:    #7A8A93;

    /* Primary — Mirage (default buttons, links inline pueden usar accent o secondary) */
    --color-primary:      #16232A;
    --color-primary-hover:#0E1A1F;
    --color-on-primary:   #ffffff;

    /* Accent — Blaze Orange (CTAs críticos puntuales) */
    --color-accent:       #FF5B04;
    --color-accent-hover: #E04E00;
    --color-on-accent:    #ffffff;

    /* Secondary — Deep Sea Green (acentos institucionales, badges destacados) */
    --color-secondary:    #075056;
    --color-secondary-hover:#053F44;
    --color-on-secondary: #ffffff;
    --color-secondary-bg: #E4EEF0;

    /* Semánticos — alineados al tono de marca */
    --color-success:      #075056;  /* reaprovecho Deep Sea Green */
    --color-success-bg:   #E4EEF0;
    --color-error:        #C53030;
    --color-error-bg:     #FEF2F2;
    --color-warning:      #FF5B04;  /* Blaze para coherencia */
    --color-warning-bg:   #FFF4ED;
    --color-info:         #075056;
    --color-info-bg:      #E4EEF0;

    /* ─── SPACING ─────────────────────────────────────────────────── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* ─── TYPE ────────────────────────────────────────────────────────
       Sans (UI/body): DM Sans (Google Fonts) — humanista, geométrica,
       optimizada para pantalla y números densos.
       Serif (display): Fraunces (Google Fonts) — variable, expresiva,
       solo en h1/h2 y hero para dar firma editorial.
       Cargadas vía CDN en views/layout/_meta.php.
    ─────────────────────────────────────────────────────────────── */
    --font-sans:  "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
    --font-mono:  ui-monospace, "SF Mono", Menlo, monospace;

    --text-xs:   12px;
    --text-sm:   13px;
    --text-base: 14px;
    --text-md:   16px;
    --text-lg:   18px;
    --text-xl:   22px;
    --text-2xl:  28px;
    --text-3xl:  36px;

    /* ─── RADIUS — generosos al estilo Typeform/Mirage ───────────── */
    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 16px;

    /* ─── SHADOWS ─────────────────────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(22,35,42,.06);
    --shadow:    0 2px 8px rgba(22,35,42,.08);
    --shadow-lg: 0 8px 32px rgba(22,35,42,.12);

    /* ─── LAYOUT ──────────────────────────────────────────────────── */
    --container-max: 1100px;
    --header-h:      56px;
}