/*
 * Design tokens — revised per the client's colour reference (packaging
 * photography): warm parchment/champagne/stone palette, replacing the
 * earlier ivory/charcoal direction. Layout, typography scale, grid and
 * spacing are unchanged from the approved architecture proposal §2 — only
 * colour changed here.
 *
 * The packaging's monogram/script identity is NOT reproduced anywhere —
 * the client is supplying a final logo separately. `.brand-mark` below is
 * a fixed-height slot sized so a wordmark today swaps for an <img>/<svg>
 * logo later with no layout change.
 *
 * Font files themselves are not sourced yet (Phase 7 content/asset work);
 * @font-face below is wired and ready, with system-stack fallbacks.
 */

@font-face {
    font-family: 'Fraunces';
    src: url('/assets/fonts/fraunces-variable.woff2') format('woff2-variations');
    font-weight: 300 500;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-variable.woff2') format('woff2-variations');
    font-weight: 400 600;
    font-display: swap;
}

:root {
    /* Backgrounds — three distinct tones, never one flat beige everywhere */
    --colour-background:    #F1E7DA; /* main editorial background — pale warm parchment */
    --colour-surface:       #F7F0E7; /* product photography / card surfaces — very pale cream */
    --colour-surface-deep:  #DFCCB8; /* alternate editorial sections — champagne/stone */
    --colour-white:         #FFFDFC; /* lightest surface — zoomed product imagery, form fields */

    /* Text */
    --colour-text:          #3A2E27; /* primary text, deep warm brown — also the footer/button fill */
    --colour-text-soft:     #69584C; /* secondary body text — AA-safe on parchment/surface */
    --colour-muted:         #887565; /* metadata/micro-labels only, not body copy — see note below */

    /* Structure */
    --colour-stone:         #CBB49D; /* mid-tone stone — section dividers, quiet emphasis */
    --colour-line:          #D8C6B4; /* hairlines/borders — low-contrast warm stone */
    --colour-accent:        #9A7960; /* editorial accent + secondary-button border, used sparingly */

    /* Footer (deep warm brown, pale parchment type) */
    --colour-footer-bg:     var(--colour-text);
    --colour-footer-text:   var(--colour-surface);

    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 64px;
    --space-8: 96px;
    --space-9: 144px;

    --max-width: 1280px;
    --radius: 0px;
}

/*
 * WCAG 2.2 AA note: --colour-muted (#887565) on --colour-background
 * (#F1E7DA) measures ~3.3:1 — usable for uppercase micro-labels (§2's
 * 11–12px tracked caps, treated as the brief's own brass caveat was) but
 * NOT for body copy or anything below ~18px regular weight. Body text uses
 * --colour-text or --colour-text-soft (both exceed 7:1 on every background
 * token above). Re-verify with a contrast tool once real content/photography
 * is in place — these are starting values per the brief, not final.
 */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--colour-background);
    color: var(--colour-text);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.6;
    /* Belt-and-braces: catches any future layout that overflows narrow
       viewports even after the known causes are fixed properly below. */
    overflow-x: hidden;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 400;
    margin: 0 0 var(--space-3);
    color: var(--colour-text);
}

h1 { font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem); font-weight: 300; }
h2 { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); }
h3 { font-size: 1.125rem; font-family: var(--font-ui); font-weight: 500; }

p { color: var(--colour-text-soft); }

a { color: var(--colour-text); }

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-5);
}

/* Section background utilities — deliberate tonal hierarchy, not repetition */
.bg-parchment { background: var(--colour-background); }
.bg-surface   { background: var(--colour-surface); }
.bg-stone     { background: var(--colour-surface-deep); }
.bg-white     { background: var(--colour-white); }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}