/* ============================================================
   MV STYLES — DESIGN TOKENS  (single source of truth)
   Brand direction: Luxury charcoal + warm gold
   ------------------------------------------------------------
   This file is the ONLY place brand values are defined.
   It is loaded AFTER base.css / ecommerce.css / customer.css and
   uses the `:root:root` selector so its values win over the older
   conflicting :root blocks in those files regardless of load order.

   Admin-configurable brand colours (BrandingSettings) are injected
   as a small inline <style> AFTER this file in the base templates,
   so a colour set in the admin still overrides the defaults here.
   ============================================================ */

:root:root {
  /* ---------- Brand palette ---------- */
  --color-primary: #2C2826;          /* deep warm charcoal — primary ink / buttons */
  --color-primary-light: #4A4644;
  --color-primary-dark: #1A1715;

  --color-accent: #B98C46;           /* warm gold — CTAs, highlights, decorative rules */
  --color-accent-light: #D9B87C;
  --color-accent-dark: #8A6A34;      /* gold that passes AA as text on light bg (~4.7:1) */
  --color-accent-strong: var(--color-accent-dark);

  --color-secondary: #6B6662;        /* muted stone — secondary text / UI */
  --color-secondary-light: #A39E9A;
  --color-secondary-dark: #4A4644;

  /* ---------- Neutrals / surfaces ---------- */
  --color-background: #FFFFFF;
  --color-bg: var(--color-background);
  --color-bg-light: #F7F4EF;          /* warm cream */
  --color-bg-dark: #EFEAE2;
  --color-surface: #F7F4EF;
  --color-surface-alt: #EFEAE2;
  --color-surface-2: #EFEAE2;
  --color-white: #FFFFFF;
  --color-light-gray: #F2EEE8;
  --color-gray: #857C72;
  --color-dark-gray: #5C554E;
  --color-black: #1A1715;

  /* ---------- Text ---------- */
  --color-text: #262220;             /* body ink — AA on white (~14:1) */
  --color-text-dark: #1A1715;
  --color-text-light: #5C554E;       /* secondary text (~7:1) */
  --color-text-secondary: #5C554E;   /* (was undefined — 12 template uses) */
  --color-text-muted: #7A7168;       /* muted but still AA (~4.7:1) */
  --color-text-lighter: #7A7168;     /* (was #A39E9A ≈ 2.3:1 — failed AA) */

  /* ---------- Borders ---------- */
  --color-border: #E4DED4;
  --color-border-light: #EFEAE2;
  --color-border-strong: #D8D0C4;

  /* ---------- Semantic ---------- */
  --color-success: #3E7C4E;
  --color-warning: #B4832F;
  --color-danger: #B23B2E;
  --color-error: var(--color-danger);
  --color-info: #5C554E;

  /* ---------- Legacy aliases (base.html era — keep until templates migrate) ---------- */
  --primary-color: var(--color-primary);
  --secondary-color: var(--color-accent);
  --accent-color: var(--color-accent);
  --text-dark: var(--color-text);
  --text-light: var(--color-text-light);
  --bg-light: var(--color-bg-light);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --danger: var(--color-danger);

  /* ---------- Typography ---------- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-secondary: var(--font-primary);
  --font-family: var(--font-primary);

  --font-size-xs: 0.75rem;      /* 12 */
  --font-size-sm: 0.875rem;     /* 14 */
  --font-size-base: 1rem;       /* 16 */
  --font-size-lg: 1.125rem;     /* 18 */
  --font-size-xl: 1.25rem;      /* 20 */
  --font-size-2xl: 1.5rem;      /* 24 */
  --font-size-3xl: 1.875rem;    /* 30 */
  --font-size-4xl: 2.25rem;     /* 36 */
  --font-size-5xl: 3rem;        /* 48 */

  /* Oversized editorial display sizes — fluid clamp() so hero headlines
     scale smoothly between mobile and large desktop instead of jumping
     at breakpoints. Used for hero/section headlines only, not body copy. */
  --font-size-display-sm: clamp(2.5rem, 5vw + 1rem, 4rem);    /* ~40-64 */
  --font-size-display-md: clamp(3rem, 6vw + 1rem, 5.5rem);    /* ~48-88 */
  --font-size-display-lg: clamp(3.5rem, 8vw + 1rem, 7.5rem);  /* ~56-120 */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.75;

  --tracking-tighter: -0.045em; /* oversized display headlines only */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;   /* eyebrow / small caps labels */

  /* ---------- Spacing — one 4/8 scale, both naming schemes ---------- */
  --spacing-1: 0.25rem;  --spacing-xs: 0.25rem;
  --spacing-2: 0.5rem;   --spacing-sm: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;     --spacing-md: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;   --spacing-lg: 1.5rem;
  --spacing-8: 2rem;     --spacing-xl: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;    --spacing-2xl: 3rem;
  --spacing-16: 4rem;    --spacing-3xl: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;    --spacing-4xl: 6rem;   /* (was undefined — 2 template uses) */

  /* Editorial section spacing — the generous negative space "Exaggerated
     Minimalism" needs between major homepage/landing sections. Larger
     than any existing scale step on purpose; shrinks on mobile below. */
  --section-spacing: clamp(4rem, 10vw, 9rem);

  /* ---------- Radius ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --radius-full: 9999px;

  /* ---------- Shadows — soft, warm-tinted ---------- */
  --shadow-xs: 0 1px 2px rgba(38, 34, 32, 0.06);
  --shadow-sm: 0 1px 3px rgba(38, 34, 32, 0.08), 0 1px 2px rgba(38, 34, 32, 0.04);
  --shadow-md: 0 4px 12px rgba(38, 34, 32, 0.10);
  --shadow-lg: 0 10px 24px rgba(38, 34, 32, 0.12);
  --shadow-xl: 0 20px 40px rgba(38, 34, 32, 0.14);

  /* ---------- Motion ---------- */
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
  --transition-slow: 350ms ease;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Scroll-reveal / stagger timing for the new animation layer. Kept
     separate from the micro-interaction transitions above since reveals
     run once per element and can afford a slightly longer, more cinematic
     duration without feeling laggy the way a hover transition would.
     foundation.css's universal prefers-reduced-motion rule already forces
     all animation/transition durations to ~0, so any reveal built on
     these tokens is automatically neutralised for that setting. */
  --reveal-duration: 600ms;
  --reveal-distance: 24px;
  --reveal-stagger: 60ms;

  /* ---------- Focus ---------- */
  --focus-ring-color: #2C2826;
  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--focus-ring-color);

  /* ---------- Layout ---------- */
  --container-max: 1200px;   /* one canonical page width — see .container everywhere */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --content-measure: 68ch;     /* readable line length for prose */
  --header-height: 64px;

  /* ---------- Z-index scale ---------- */
  --z-base: 1;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-toast: 1080;
}

/* Responsive type — keep large display sizes from overflowing small screens
   (mirrors the shrink base.css applied at <=768px, which :root:root would otherwise win over). */
@media (max-width: 768px) {
  :root:root {
    --font-size-5xl: 2.25rem;   /* 36 */
    --font-size-4xl: 1.875rem;  /* 30 */
    --font-size-3xl: 1.5rem;    /* 24 */
    --font-size-2xl: 1.375rem;  /* 22 */
  }
}