/* ============================================================
   TOKENS — estatuto demo 2026-06-09 (ver BRAND.md y design/demo-estatuto.html)
   Papel calido + tinta + sol. Editorial-neobrutalist.
   ============================================================ */
:root {
    /* TINTA */
    --ink: #1c1a14;
    --ink-soft: #3d3829;
    --ink-mute: #6b6450;

    /* PAPEL */
    --paper: #faf6ec;
    --paper-warm: #f3ecdb;
    --paper-deep: #ebe2cb;

    /* SOL */
    --sol: #f5a300;
    --sol-deep: #d97b00;
    --sol-pale: #fde8bd;

    /* VERDE */
    --verde: #3a6b35;
    --verde-pale: #e4eedd;

    /* NEUTROS / SEMANTICOS */
    --blanco: #ffffff;
    --rojo-error: #c0392b;

    /* SOBRE TINTA (secciones oscuras) */
    --paper-70: rgba(250, 246, 236, 0.7);
    --paper-50: rgba(250, 246, 236, 0.5);
    --paper-25: rgba(250, 246, 236, 0.25);
    --paper-15: rgba(250, 246, 236, 0.15);

    /* TIPOGRAFIA */
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Archivo', system-ui, -apple-system, sans-serif;
    --font-mono: 'Spline Sans Mono', 'JetBrains Mono', 'Courier New', monospace;

    /* ESCALA TIPOGRAFICA */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    --text-7xl: 4.6rem;

    /* INTERLINEADO */
    --leading-hero: 0.95;
    --leading-tight: 1.1;
    --leading-snug: 1.3;
    --leading-normal: 1.6;

    /* PESOS */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 900;

    /* ESPACIADO */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* LAYOUT */
    --max-width-content: 720px;
    --max-width-page: 1140px;
    --sidebar-width: 320px;
    --header-height: 64px;

    /* BORDES — la regla: tinta de 2px */
    --border-ink: 2px solid var(--ink);
    --border-paper: 2px solid var(--paper-25);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 9999px;
    --radius-full: 9999px;

    /* SOMBRAS SOLIDAS (sin blur) */
    --shadow-solid-sm: 3px 3px 0 var(--ink);
    --shadow-solid: 5px 5px 0 var(--ink);
    --shadow-solid-lg: 8px 8px 0 var(--ink);
    --shadow-solid-press: 2px 2px 0 var(--ink);
    --shadow-solid-pale: 5px 5px 0 var(--sol-pale);
    --shadow-solid-sol: 6px 6px 0 var(--sol);
    --shadow-solid-verde: 6px 6px 0 var(--verde);

    /* FONDOS COMPUESTOS */
    --gradient-hero: radial-gradient(circle at 78% 18%, rgba(245, 163, 0, 0.22), transparent 42%),
                     radial-gradient(circle at 12% 85%, rgba(58, 107, 53, 0.10), transparent 40%);
    --dots-sol: radial-gradient(rgba(245, 163, 0, 0.07) 1.2px, transparent 1.2px);

    /* TRANSICIONES */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;

    /* ------------------------------------------------------------
       ALIAS LEGACY (compatibilidad mientras se migran componentes;
       no usar en codigo nuevo — usar los tokens de arriba)
       ------------------------------------------------------------ */
    --azul-central: var(--ink);
    --azul-central-dark: #000000;
    --azul-central-light: var(--paper-warm);
    --cobre-solar: var(--sol-deep);
    --cobre-solar-dark: #b06300;
    --cobre-solar-light: var(--sol-pale);
    --negro-texto: var(--ink);
    --tinta-calida: var(--ink);
    --cuerpo-calido: var(--ink-soft);
    --gris-medio: var(--ink-mute);
    --gris-claro: var(--paper-deep);
    --crema-fondo: var(--paper);
    --link-azul: var(--sol-deep);
    --azul-tinte: var(--paper-warm);
    --cobre-tinte: var(--sol-pale);
    --surface-calida: var(--paper-warm);
    --verde-ahorro-real: var(--verde);
    --ambar-perc-obsoleto: var(--sol-deep);
    --rojo-vendedor-miente: var(--rojo-error);
    --fw-extrabold: var(--fw-black);
    --shadow-sm: var(--shadow-solid-sm);
    --shadow-md: var(--shadow-solid);
    --shadow-lg: var(--shadow-solid-lg);
}