/* ============================================================
   Design tokens — single source of truth.
   Derived from /design-references/homepage-design-reference.jpeg:
   warm off-white canvas, white surfaces, deep charcoal, muted
   sage accent, warm beige, hairline borders, natural photo tones.
   ============================================================ */

:root {
    /* ---------- Colour ---------- */
    --color-bg: #f0ede6;            /* warm off-white page background */
    --color-surface: #ffffff;       /* content panels and cards */
    --color-ink: #171610;           /* deep charcoal — text, dark panels, footer */
    --color-ink-soft: #2a2822;      /* hover state of dark surfaces */
    --color-sage: #bfcb9b;          /* muted sage accent (pills, highlights) */
    --color-sage-soft: #dde3c9;     /* sage tint for tags and hovers */
    --color-sage-deep: #6f7a52;     /* sage for text/borders on light */
    --color-beige: #e5ddcb;         /* warm beige blocks and placeholders */
    --color-border: #e3dfd5;        /* subtle grey borders / hairlines */
    --color-muted: #6f6b62;         /* secondary text on light */
    --color-stone: #a69f92;         /* muted text on dark surfaces */
    --color-error: #b4552e;
    --color-success: #4d6b4f;

    /* Derived surface tints (kept as tokens so no component
       hard-codes a hex value) */
    --color-hero-top: #4a453a;      /* hero placeholder gradient start */
    --color-beige-deep: #d3c9b4;    /* image placeholder gradient end */
    --color-success-bg: #e6ede4;
    --color-error-bg: #f3e2d8;
    --color-error-tint: #f9efe8;    /* error summary background */
    --color-row-hover: #faf9f6;     /* admin table hover / quote block */
    --color-admin-bg: #f4f2ed;      /* admin canvas */

    /* Photography overlay for text legibility on hero/promo images */
    --overlay-hero: linear-gradient(180deg, rgb(23 22 16 / 0.30) 0%, rgb(23 22 16 / 0.10) 45%, rgb(23 22 16 / 0.62) 100%);
    --overlay-panel: linear-gradient(115deg, rgb(23 22 16 / 0.88) 25%, rgb(23 22 16 / 0.45) 100%);

    /* Legacy aliases (admin.css, earlier phases) */
    --color-cream: var(--color-bg);
    --color-sand: var(--color-border);
    --color-white: var(--color-surface);
    --color-clay: var(--color-sage-deep);

    /* ---------- Typography ---------- */
    /* Geometric sans stack with graceful platform fallbacks */
    --font-sans: "Avenir Next", Avenir, Futura, "Century Gothic",
                 "Segoe UI", "Helvetica Neue", Arial, ui-sans-serif, sans-serif;

    --text-display: clamp(2.9rem, 1.6rem + 5.2vw, 6rem);   /* hero */
    --text-h1: clamp(2.5rem, 1.7rem + 3vw, 4.25rem);
    --text-h2: clamp(1.9rem, 1.4rem + 1.8vw, 3rem);
    --text-h3: clamp(1.35rem, 1.2rem + 0.5vw, 1.65rem);
    --text-h4: 1.125rem;
    --text-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
    --text-small: 0.875rem;
    --text-tiny: 0.78rem;
    --text-eyebrow: 0.75rem;                                 /* spaced uppercase labels */

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --leading-display: 1.02;   /* very tight display headings */
    --leading-heading: 1.12;
    --leading-body: 1.65;
    --tracking-tight: -0.025em;
    --tracking-eyebrow: 0.16em;

    /* ---------- Spacing ---------- */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2.5rem;
    --space-5: 4rem;
    --space-6: 6rem;
    --space-7: 8.5rem;   /* hero / major section breathing room */

    /* ---------- Radius system (never improvise corners) ----------
       sm  → tags-as-chips, tiny thumbs      md → inputs, small media
       lg  → cards                           xl → major content panels
       pill → buttons and pill tags (per reference) */
    --radius-xs: 0.35rem;   /* admin thumbs, inline chips */
    --radius-sm: 0.5rem;
    --radius-md: 0.875rem;
    --radius-lg: 1.25rem;
    --radius-xl: 2rem;
    --radius-pill: 999px;

    /* Admin uses a slightly tighter scale for dense UI */
    --radius-admin: 0.6rem;

    /* Legacy alias */
    --radius-panel: var(--radius-xl);

    /* ---------- Layout ---------- */
    --container-max: 82.5rem;                      /* 1320px content on 1440 */
    --gutter: clamp(1.25rem, 5vw, 4rem);           /* large desktop, comfy mobile */
    --grid-cols: 12;
    --grid-gap: clamp(1rem, 2vw, 1.75rem);

    /* ---------- Elevation ---------- */
    --shadow-card: 0 1px 2px rgb(23 22 16 / 0.04), 0 12px 32px rgb(23 22 16 / 0.06);
    --shadow-panel: 0 24px 64px rgb(23 22 16 / 0.09);
    --shadow-card-hover: 0 20px 44px rgb(23 22 16 / 0.12);

    /* ---------- Motion ----------
       Two separate scales, deliberately.

       Interaction motion (hover, focus, button press) stays fast: a
       control that lags behind the cursor feels broken, not premium.

       Reveal motion is much slower. Content unfolds over roughly a
       second with a long decelerating tail, so scrolling feels
       unhurried and considered. Scroll physics itself is untouched —
       the wheel behaves exactly as the operating system intends. */

    /* Interaction — keep snappy. */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --duration-fast: 0.22s;
    --duration: 0.55s;
    --duration-slow: 0.9s;

    /* Reveal — expo-out: moves early, then coasts to a stop.

       Kept deliberately short. Anything approaching a second reads as
       the page being slow rather than considered: the visitor has
       already scrolled to the content and is waiting on it. The sense
       of richness comes from the easing curve and the stagger, not
       from duration. */
    --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-reveal: 1s;
    --duration-reveal-slow: 1.25s;

    /* Gap between staggered siblings in a revealing group. The stagger
       does more for perceived quality than duration does — elements
       arriving one at a time reads as choreography, elements arriving
       together reads as a page finishing loading. */
    --stagger: 0.15s;

    /* Distance travelled during a reveal. Larger = more noticeable. */
    --reveal-shift: 2.75rem;

    /* Secondary motion: elements resolve into place rather than only
       sliding. Kept small — past about 8px the blur reads as a
       rendering fault rather than depth of field. */
    --reveal-blur: 6px;
    --reveal-scale: 0.97;

    /* ---------- Z-index ---------- */
    --z-header: 50;
    --z-nav: 60;
}