/* ==========================================================================
   CEMI Factory — Design Tokens
   Inherited verbatim from the CEMI design system (cemi-web/src/styles/variables.css)
   so the Factory reads as part of the family. Factory-specific additions are
   grouped at the bottom under "Factory extensions".

   Token roles:
     --color-*    → FILLS, BORDERS, SOLID BACKGROUNDS. Brand constants.
     --surface-*  → CONTAINER BACKGROUNDS (page, cards, sections).
     --text-*     → TEXT.
   ========================================================================== */

:root {
    /* ── Brand colors ─────────────────────────────────────────────────── */
    --color-primary:        #a70000;   /* Dark red — clay/fire */
    --color-primary-dark:   #850000;
    --color-primary-light:  #c62828;

    --color-ocre:           #D9A441;   /* Ocre yellow — earth, warmth */
    --color-cobalt:         #2F4F6F;   /* Deep cobalt blue — intelligence */
    --color-green:          #4B775A;   /* Earth green — growth, harmony */
    --color-clay:           #A67F5B;   /* Warm clay brown — stability */
    --color-sand:           #E0CBA8;   /* Neutral sand — balance */

    --color-accent:         var(--color-ocre);

    /* ── Surfaces ─────────────────────────────────────────────────────── */
    --surface-page:         #FDFBF7;   /* Warm off-white (parchment) */
    --surface-card:         #FFFFFF;
    --surface-parchment:    #F5F0E8;   /* Sand sections */
    --surface-dark:         #1A1A1A;
    --surface-dark-alt:     #222222;

    /* ── Text ─────────────────────────────────────────────────────────── */
    --text-primary:         #1A1A1A;
    --text-secondary:       #333333;
    --text-muted:           #666666;
    --text-link:            var(--color-primary);
    --text-inverse:         #FDFBF7;
    --text-inverse-muted:   rgba(253, 251, 247, 0.72);

    /* ── Typography ───────────────────────────────────────────────────── */
    --font-heading:         'MuseoModerno', system-ui, sans-serif;
    --font-body:            'Inter', system-ui, sans-serif;
    --font-mono:            ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, monospace;

    --fs-xs:                0.75rem;
    --fs-sm:                0.875rem;
    --fs-base:              1rem;
    --fs-md:                1.125rem;
    --fs-lg:                1.25rem;
    --fs-xl:                1.5rem;
    --fs-2xl:               2rem;
    --fs-3xl:               2.5rem;
    --fs-4xl:               3rem;
    --fs-5xl:               3.5rem;

    --fw-light:             300;
    --fw-regular:           400;
    --fw-medium:            500;
    --fw-semibold:          600;
    --fw-bold:              700;

    --lh-tight:             1.2;
    --lh-normal:            1.6;
    --lh-relaxed:           1.8;

    /* ── Spacing ──────────────────────────────────────────────────────── */
    --space-xs:             0.25rem;
    --space-sm:             0.5rem;
    --space-md:             1rem;
    --space-lg:             1.5rem;
    --space-xl:             2rem;
    --space-2xl:            3rem;
    --space-3xl:            4rem;
    --space-4xl:            6rem;

    /* ── Layout ───────────────────────────────────────────────────────── */
    --container-max:        1200px;
    --container-narrow:     760px;
    --container-padding:    1.5rem;
    --section-padding:      5rem 0;

    /* ── Borders & radius ─────────────────────────────────────────────── */
    --radius-sm:            4px;
    --radius-md:            8px;
    --radius-lg:            16px;
    --radius-full:          9999px;
    --border-light:         1px solid rgba(0,0,0,0.08);
    --border-sand:          1px solid var(--color-sand);
    --border-color:         rgba(0,0,0,0.08);

    /* ── Shadows ──────────────────────────────────────────────────────── */
    --shadow-sm:            0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:            0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg:            0 8px 30px rgba(0,0,0,0.12);
    --shadow-hover:         0 12px 40px rgba(0,0,0,0.15);

    /* ── Transitions ──────────────────────────────────────────────────── */
    --transition-fast:      150ms ease;
    --transition-base:      300ms ease;
    --transition-slow:      500ms ease;

    /* ── Z-index ──────────────────────────────────────────────────────── */
    --z-nav:                1000;
    --z-overlay:            900;
    --z-modal:              1100;

    /* ══ Factory extensions ═══════════════════════════════════════════════
       The Factory is the workshop of the group, so it carries a darker,
       more technical register than cemi.ai's parchment. These tokens drive
       the dark hero / trial / footer bands and the blueprint grid motif.   */

    --factory-ink:          #0F1216;   /* Near-black with a cool cast */
    --factory-ink-alt:      #151A20;
    --factory-rule:         rgba(224, 203, 168, 0.14);  /* sand @ low alpha */
    --factory-rule-strong:  rgba(224, 203, 168, 0.28);
    --factory-glow:         rgba(167, 0, 0, 0.22);
    --factory-grid:         rgba(224, 203, 168, 0.055);
    --factory-grid-size:    56px;

    /* Measurement/eyebrow lettering used across section labels */
    --tracking-eyebrow:     0.18em;
}