/* =========================================================================
   Pepper v2 Design Tokens — Single Source of Truth
   =========================================================================
   Canonical token definitions for the v2 design system. Mirrors Section 2
   of /docs/DESIGN_GUIDE.md. Every v2 page links this file so colors,
   typography, layout, and motion stay synchronized across the codebase.

   Inline `:root` blocks in v2 HTML pages still duplicate a subset of these
   tokens as a defensive fallback layer. Do not remove those without an
   audit — the inline blocks cascade-override and removing them risks
   regressions on pages that depend on a specific token shape. Edit the
   canonical values here; the inline blocks will continue to cascade
   identically as long as values match.

   When values diverge intentionally (e.g. conversion-page accents), keep
   the override scoped to that page's inline block — do NOT branch this
   file. This file is shared and authoritative.
   ========================================================================= */

:root {
    /* ---- Surfaces (oxblood family) ---------------------------------- */
    --bg:            #2A0E08;                       /* Primary surface (oxblood) */
    --bg-deep:       #1F0905;                       /* Sunken surfaces (footers, input wells) */
    --bg-elevated:   #341006;                       /* Hover states, rare elevated cards */
    --bg-input:      rgba(31, 9, 5, 0.65);          /* Form-input depression */
    --bg-input-hover:rgba(31, 9, 5, 0.78);          /* Form-input hover */
    --bg-input-focus:rgba(245, 237, 224, 0.04);     /* Form-input focus brighten */

    /* ---- Foreground (cream family) ---------------------------------- */
    --cream:         #F5EDE0;                       /* Primary text, headlines */
    --cream-muted:   rgba(245, 237, 224, 0.62);     /* Secondary text, helper copy */
    --cream-dim:     rgba(245, 237, 224, 0.42);     /* Tertiary text, index numbers */
    --cream-faint:   rgba(245, 237, 224, 0.18);     /* Hairline dividers */
    --cream-ghost:   rgba(245, 237, 224, 0.08);     /* Barely-there UI structure */

    /* ---- Accent (terracotta family) --------------------------------- */
    --terracotta:        #C56B47;                   /* The accent. Used sparingly. */
    --terracotta-hover:  #D17D58;                   /* Hover state for terracotta surfaces */
    --terracotta-bright: #E08A66;                   /* Active/emphasis variant */

    /* ---- Borders (terracotta-tinted) -------------------------------- */
    --border:        rgba(197, 107, 71, 0.42);      /* Primary border for fields, dividers */
    --border-strong: rgba(197, 107, 71, 0.65);      /* Hover/active border state */
    --border-soft:   rgba(197, 107, 71, 0.20);      /* Subtle section separators */
    --border-faint:  rgba(197, 107, 71, 0.10);      /* Barely-there structural lines */

    /* ---- Status colors ---------------------------------------------- */
    --error:         #E84B3A;
    --error-bg:      rgba(232, 75, 58, 0.10);
    --warning:       #E8C547;
    --warning-bg:    rgba(232, 197, 71, 0.08);
    --success:       #5BAA6B;

    /* ---- Typography ------------------------------------------------- */
    --serif:        'Fraunces', 'Fraunces Fallback', 'Times New Roman', serif;
    --serif-italic: 'STIX Two Text', 'STIX Two Text Fallback', 'Times New Roman', serif;
    --sans:         'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;
    --mono:         'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* ---- Layout ----------------------------------------------------- */
    --max-w:   1180px;                              /* Outer content rail */
    --read-w:  720px;                               /* Readable text column */
    --form-w:  480px;                               /* Form column */
    --pad-x:   clamp(1.5rem, 5vw, 5.5rem);
    --edge-y:  clamp(1.5rem, 2.4vw, 2.4rem);        /* Nav-top + stat-bottom symmetry */

    /* ---- Form fields ------------------------------------------------ */
    --field-h:      52px;
    --field-px:     1.1rem;
    --field-radius: 0;                              /* Never rounded */

    /* ---- Motion ----------------------------------------------------- */
    --ease:  cubic-bezier(0.22, 1, 0.36, 1);
    --t-fast: 160ms;
    --t-med:  240ms;
    --t-slow: 420ms;
}