/* =============================================================
   MantizIS — Tokens de diseño
   Variables CSS centralizadas. Modificar aquí afecta todo el sitio.
   ============================================================= */

:root {
    /* ---------- Color base extraído del logo ---------- */
    --brand: #009a76;            /* Verde del logo (exacto) */
    --brand-deep: #006e54;       /* Verde profundo para hover/acentos */
    --brand-bright: #00c79b;     /* Verde brillante para destacados */
    --brand-glow: #d8f5ed;       /* Verde muy claro para washes */

    /* ---------- Tinta y neutros ---------- */
    --ink: #0a1f1a;              /* Negro con matiz verde — texto principal */
    --ink-soft: #2d3936;         /* Texto medio */
    --ink-mute: #5a6b67;         /* Texto secundario */
    --ink-faint: #8a9794;        /* Captions y micro-copy */

    /* ---------- Superficies ---------- */
    --surface: #ffffff;          /* Fondo principal */
    --surface-cream: #fafaf7;    /* Fondo alterno cálido */
    --surface-stone: #f1f0eb;    /* Fondo de bloques alternos */
    --surface-dark: #0a1f1a;     /* Bloque oscuro (caso destacado, manifiesto) */
    --surface-darker: #061410;   /* Aún más oscuro */

    /* ---------- Líneas y bordes ---------- */
    --line: #e6e4dc;             /* Líneas suaves */
    --line-strong: #c8c5ba;      /* Líneas marcadas */
    --line-dark: rgba(255, 255, 255, 0.12);  /* Sobre fondos oscuros */

    /* ---------- Tipografía ---------- */
    --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
    --font-body: 'Instrument Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

    /* Escala tipográfica fluid (se adapta al viewport) */
    --fs-display-1: clamp(2.75rem, 6vw + 1rem, 6.5rem);  /* H1 hero */
    --fs-display-2: clamp(2rem, 4vw + 0.5rem, 4rem);     /* H2 secciones */
    --fs-display-3: clamp(1.5rem, 2.5vw + 0.5rem, 2.5rem); /* H3 */
    --fs-headline: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
    --fs-body-lg: clamp(1.0625rem, 0.5vw + 0.875rem, 1.25rem);
    --fs-body: 1rem;
    --fs-small: 0.875rem;
    --fs-micro: 0.75rem;
    --fs-metric: clamp(2.5rem, 5vw + 1rem, 5rem);       /* Métricas grandes */

    /* Pesos */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Line-height */
    --lh-tight: 1.05;
    --lh-snug: 1.2;
    --lh-normal: 1.5;
    --lh-relaxed: 1.7;

    /* Tracking (letter-spacing) */
    --ls-tight: -0.02em;
    --ls-normal: 0;
    --ls-wide: 0.06em;
    --ls-wider: 0.14em;       /* Para eyebrows en uppercase */

    /* ---------- Espaciado (escala 8px-base) ---------- */
    --sp-1: 0.25rem;   /*  4px */
    --sp-2: 0.5rem;    /*  8px */
    --sp-3: 0.75rem;   /* 12px */
    --sp-4: 1rem;      /* 16px */
    --sp-5: 1.5rem;    /* 24px */
    --sp-6: 2rem;      /* 32px */
    --sp-7: 3rem;      /* 48px */
    --sp-8: 4rem;      /* 64px */
    --sp-9: 6rem;      /* 96px */
    --sp-10: 8rem;     /* 128px */
    --sp-11: 12rem;    /* 192px */

    /* ---------- Layout ---------- */
    --container-max: 1280px;
    --container-padding: clamp(1.25rem, 4vw, 2.5rem);

    /* ---------- Radii ---------- */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* ---------- Sombras ---------- */
    --shadow-sm: 0 1px 2px rgba(10, 31, 26, 0.04), 0 2px 4px rgba(10, 31, 26, 0.04);
    --shadow-md: 0 4px 8px rgba(10, 31, 26, 0.05), 0 12px 24px rgba(10, 31, 26, 0.06);
    --shadow-lg: 0 16px 40px rgba(10, 31, 26, 0.10), 0 4px 8px rgba(10, 31, 26, 0.05);

    /* ---------- Transiciones ---------- */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 180ms;
    --duration-medium: 320ms;
    --duration-slow: 600ms;

    /* ---------- Z-index escala ---------- */
    --z-base: 1;
    --z-raised: 10;
    --z-sticky: 100;
    --z-modal: 1000;
}