/* Opulence 2026 — Design tokens
 * Sourced from brief/opulence-platform-design-system.html (:root).
 * Component and layout styles in theme.css build on these variables.
 */
:root {
    /* Brand palette */
    --forest: #2F5234;
    --forest-deep: #1F3D2F;
    --forest-3: #264A39;
    --gold: #B6904F;
    --gold-deep: #9A7739;
    --gold-2: #C9A961;
    /* HI-058: accessible gold for TEXT. The decorative --gold (#B6904F) is only
     * ~2.6:1 on cream and fails WCAG 2.2 AA at body sizes, and --gold-deep is
     * ~3.6:1 (large-text only). --gold-text clears AA (>=4.5:1) on both cream
     * and white, so use it for eyebrows, small labels, inline links and any
     * gold text under ~24px. Reserve --gold / --gold-2 for large decorative
     * headings, icons, bullets, rules and borders.
     *   Accessible text pairings (WCAG 2.2 AA):
     *     --gold-text on --cream  (#F6F2E8) -> ~4.8:1  (AA normal + large)
     *     --gold-text on #fff                -> ~5.4:1  (AA normal + large)
     *     --gold-deep on --cream             -> ~3.6:1  (AA large text only)
     *     --gold      on --cream             -> ~2.6:1  (decorative only)
     */
    --gold-text: #86642A;
    --burgundy: #8D3B3C;
    --burgundy-deep: #7C2630;
    --cream: #F6F2E8;
    --cream-2: #EFE7D8;
    --ink: #22301F;
    --muted: #5C6157;

    /* Lines */
    --line: rgba(31, 61, 47, .16);
    --line-soft: rgba(31, 61, 47, .08);

    /* Stock status */
    --stock-in: #4E8C63;
    --stock-low: #B9832B;
    --stock-order: #6B6560;

    /* Typography */
    --display: 'Cormorant Garamond', Georgia, serif;
    --body: 'Jost', system-ui, sans-serif;

    /* HI-068: Spacing scale (eight-point rhythm)
     * A single documented set of spacing values so every build chooses from a
     * fixed scale rather than inventing one-off numbers. Steps follow an
     * 8px-based progression (4/8/16/24/40/64/96/128) and the larger steps are
     * fluid via clamp() so vertical rhythm scales smoothly between a 320px and
     * 1920px viewport. These govern the retail site, the trade portal and
     * Interiors consistently. Use --space-section for section vertical padding.
     *   --space-3xs  4px   hairline gaps
     *   --space-2xs  8px   tight element spacing
     *   --space-xs   16px  default element spacing
     *   --space-sm   24px  grouped content spacing
     *   --space-md   40px  block separation
     *   --space-lg   fluid 48->64px  large block separation
     *   --space-xl   fluid 64->96px  intra-section spacing
     *   --space-2xl  fluid 80->128px inter-section spacing
     *   --space-section  fluid 72->120px  standard section vertical padding
     */
    --space-3xs: 4px;
    --space-2xs: 8px;
    --space-xs: 16px;
    --space-sm: 24px;
    --space-md: 40px;
    --space-lg: clamp(48px, 4vw, 64px);
    --space-xl: clamp(64px, 5vw, 96px);
    --space-2xl: clamp(80px, 7vw, 128px);
    --space-section: clamp(72px, 6vw, 120px);

    /* HI-068: Modular type scale (fluid)
     * A modular scale (~1.2 ratio) expressed with clamp() for fluid sizing
     * between 320px and 1920px viewports, plus reading tokens. Reference these
     * instead of hard-coded rem/clamp values so headings and body copy share a
     * consistent rhythm across all Opulence platforms.
     *   --fs-100  small print / captions
     *   --fs-200  fine labels
     *   --fs-300  body copy (base)
     *   --fs-400  lead / large body
     *   --fs-500  small headings (h4/h3)
     *   --fs-600  section subheadings
     *   --fs-700  section titles (h2)
     *   --fs-800  page titles (h1)
     *   --fs-900  hero display
     * --measure constrains prose to ~68 characters for comfortable reading.
     */
    --fs-100: clamp(.72rem, .68rem + .18vw, .82rem);
    --fs-200: clamp(.82rem, .78rem + .2vw, .92rem);
    --fs-300: clamp(.95rem, .9rem + .25vw, 1.05rem);
    --fs-400: clamp(1.05rem, .98rem + .35vw, 1.2rem);
    --fs-500: clamp(1.2rem, 1.05rem + .6vw, 1.45rem);
    --fs-600: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
    --fs-700: clamp(1.7rem, 1.25rem + 2vw, 2.6rem);
    --fs-800: clamp(2.1rem, 1.5rem + 2.8vw, 3.2rem);
    --fs-900: clamp(2.4rem, 1.6rem + 4vw, 4rem);

    --measure: 68ch;
    --leading-tight: 1.1;
    --leading-snug: 1.35;
    --leading-normal: 1.6;

    /* Shape & motion */
    --radius: 3px;
    --elev: 0 20px 50px rgba(31, 45, 31, .10);
    --ease: cubic-bezier(.22, .61, .36, 1);

    /* HI-069: one transition duration + easing for interactive elements,
     * site-wide. Reference --motion for hover/focus/active state changes so
     * every control animates identically. Honoured by the global
     * prefers-reduced-motion rule which collapses durations to ~0. */
    --dur: .3s;
    --motion: var(--dur) var(--ease);

    /* HI-069: minimum interactive touch target (WCAG 2.5.5). */
    --touch: 44px;
}