/* ================================
   HI-FI DESIGN SYSTEM · Maestros
   Based on Claude-design prototype
   ================================ */

:root {
    /* Tipografía */
    --hi-serif: 'Playfair Display', Georgia, serif;
    --hi-sans: 'Inter', Arial, sans-serif;
    --hi-mono: 'JetBrains Mono', Consolas, monospace;

    /* Paleta base */
    --hi-ink: #2C2118;
    --hi-ink-soft: #5C534A;
    /* P1-A5: oscurecido de #7A6F65 (4.47:1) a #6E6259 (≈5:1) para texto pequeño AA. */
    --hi-ink-muted: #6E6259;

    --hi-paper: #F8F4EF;
    --hi-paper-warm: #F2EDE6;
    --hi-surface: #F9F5F0;

    --hi-accent: #9C2A1F;
    --hi-accent-hover: #C44B3E;
    --hi-gold: #D4A017;
    --hi-sepia: #B8860B;

    --hi-rule: #EDE6DB;
    --hi-border: #E0D8CC;

    /* Roles semánticos */
    --hi-bg: var(--hi-paper);
    --hi-text: var(--hi-ink);
    --hi-text-secondary: var(--hi-ink-soft);
    --hi-text-muted: var(--hi-ink-muted);
    --hi-link: #9C2A1F;
    --hi-link-hover: #C44B3E;
    --hi-focus: var(--hi-accent);

    /* Elevación */
    --hi-shadow: 0 2px 12px rgba(44, 33, 24, 0.08);
    --hi-shadow-deep: 0 4px 24px rgba(44, 33, 24, 0.15);

    /* ── Nuevos tokens "Tierra en Movimiento" ── */
    --color-primary: #9C2A1F;
    --color-primary-light: #C44B3E;
    --color-accent: #D4A017;
    --color-text: #2C2118;
    --color-text-secondary: #5C534A;
    --color-bg: #F8F4EF;
    --color-surface: #F9F5F0;
    --color-border: #EDE6DB;
    --color-success: #2A5A4C;
}

/* RESET HI-FI */
.hi-shell { max-width: 100%; margin: 0 auto; padding: 0 4%; }

.hi-eyebrow {
    font-family: var(--hi-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hi-ink-muted);
    margin-bottom: 0.5rem;
}

.hi-display {
    font-family: var(--hi-serif);
    font-weight: 600;
    line-height: 1.1;
    color: var(--hi-ink);
}
.hi-h1 { font-size: clamp(2.8rem, 5vw, 4.5rem); }
.hi-h2 { font-size: clamp(1.6rem, 3.5vw, 2.25rem); }
.hi-h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }

.hi-lede {
    font-family: var(--hi-sans);
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--hi-ink-soft);
    max-width: 560px;
    margin-top: 1.5rem;
}