/* ==========================================================================
   Tsilivi Jewels – design tokens
   The ONLY :root block of the website (see Docs/WebsiteUI/DESIGN.md §1).
   Page stylesheets must not declare their own :root – use these tokens,
   or the legacy aliases at the bottom (kept so older CSS keeps working).
   ========================================================================== */

:root {
    /* ── Brand ── */
    --brand-plum: #3F1C46;
    --brand-plum-deep: #2A1230;
    --brand-plum-soft: #5A2864;
    --brand-plum-tint: #F4EEF5;
    --brand-gold: #C9A96E;
    --brand-gold-light: #E8D5A3;
    --brand-gold-deep: #A8874E;

    /* ── Surfaces & lines ── */
    --surface: #FFFFFF;
    --surface-cream: #FAF8F5;
    --surface-sand: #F0EDE9;
    --surface-ivory: #F1F1E5;
    --line: #E3DFDC;
    --line-strong: #CCC7C2;

    /* ── Text ── */
    --text-strong: #1A0E1E;
    --text: #3B3340;
    --text-muted: #6B6270;
    --text-on-dark: #FFFFFF;
    --text-on-dark-muted: rgba(227, 223, 220, .72);

    /* ── Status ── */
    --success: #1A7A4A;
    --success-bg: #E8F3EC;
    --danger: #9B2C2C;
    --danger-bg: #F8E9E9;
    --warning: #8A6200;
    --warning-bg: #FBF3DD;

    /* ── Typography ── */
    --font-serif: 'Calisto MT', Georgia, 'Times New Roman', serif;
    --font-sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-base: 15px;
    --fs-md: 16px;
    --fs-lg: 20px;
    --fs-xl: 28px;
    --fs-2xl: clamp(28px, 3.2vw, 40px);
    --fs-hero: clamp(32px, 4.6vw, 56px);
    --lh-tight: 1.2;
    --lh-base: 1.65;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;

    /* ── Spacing (4px steps) ── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --section-y: clamp(48px, 7vw, 96px);

    /* ── Shape, depth, motion ── */
    --radius-0: 0;
    --radius-sm: 4px;
    --radius: 8px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 3px rgba(63, 28, 70, .08);
    --shadow: 0 8px 30px rgba(63, 28, 70, .12);
    --ring: 0 0 0 3px rgba(201, 169, 110, .45);
    --ease: cubic-bezier(.2, .7, .2, 1);
    --dur: .2s;
    --container-max: 1320px;

    /* ── Scrollbar ── */
    --scrollbar-track: var(--surface-cream);
    --scrollbar-thumb: var(--brand-plum);
    --scrollbar-thumb-hover: var(--brand-gold);

    /* ── Legacy aliases (old variable names → tokens) ── */
    --color-primary: var(--brand-plum);
    --plum: var(--brand-plum);
    --plum-light: var(--brand-plum-soft);
    --plum-deep: var(--brand-plum-deep);
    --sand: var(--line);
    --sand-light: var(--surface-sand);
    --sand-dark: var(--line-strong);
    --cream: var(--surface-cream);
    --white: var(--surface);
    --text-dark: var(--text-strong);
    --text-mid: var(--text-muted);
    --text-grey: var(--text);
    --gold: var(--brand-gold);
    --gold-light: var(--brand-gold-light);
    --color-grey: #E9E9E9;
    --color-light-yellow: var(--surface-ivory);
    --color-lightYellow: var(--surface-ivory);
    --font-calisto: var(--font-serif);
    --font-outfit: var(--font-sans);

    /* Default for the JS-maintained header offset (script.js overwrites it on <html>).
       style.css / productDetails.css defined it as 0px before tokens existed – kept so
       var(--header-height) without a fallback still resolves before the script runs. */
    --header-height: 0px;
    /* --scrollbar-width, --gx, --gy are set by JS only (intentionally undefined here). */
}