/* ================================================
   EspriaFox design tokens — see docs/DESIGN.md
   Editorial theme: black ink on white, vibrant
   photography, one scarlet accent.
   Note: token names (--cream, --rose…) are kept for
   compatibility with existing scoped styles; their
   values now map to the editorial palette.
   ================================================ */

:root {
    /* Base */
    --cream: #FFFFFF;
    --white: #FFFFFF;
    --ink: #0A0A0A;
    --ink-soft: #4B4B4B;
    --ink-faint: #8A8A8A;
    --line: #E4E4E4;

    /* Washes — light paper tints that lift panels and table rows off the white
       page. Same lightness family as the -mist tints below, so they mix calmly. */
    --wash: #f5f3f9;
    --wash-deep: #EAE6F3;

    /* Accent — editorial scarlet */
    --rose: #C8102E;
    --rose-deep: #9C0A22;
    --rose-mist: #FBEBED;

    /* Support */
    --sage: #57804F;
    --sage-deep: #426340;
    --sage-mist: #EEF3EC;
    --gold: #B08A3E;
    --gold-deep: #8A692D;
    --clay: #A66A3F;
    --clay-deep: #7F5230;
    --clay-mist: #F7EDE4;

    /* Typography */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Outfit', system-ui, -apple-system, sans-serif;

    --text-hero: clamp(2.6rem, 6vw, 4rem);
    --text-title: 1.75rem;
    --text-lead: 1.125rem;
    --text-base: 1rem;
    --text-meta: 0.8rem;

    /* Spacing — 8px scale */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;
    --space-6: 64px;
    --space-7: 96px;
    --space-8: 128px;

    /* Shape & motion — squared-off, editorial */
    --radius-card: 10px;
    --radius-input: 0;
    --transition: 180ms ease-out;
    --shadow-lift: 0 10px 32px rgba(0, 0, 0, 0.07);
}