/* ==========================================================================
   variables.css — Design tokens
   The single source of truth for colour, type, space, elevation and motion.
   Nothing in this file produces output; every other stylesheet consumes it.
   ========================================================================== */

:root {
  /* ---------- Brand colours ----------
     Sampled directly from the SSV packaging, logo and campaign artwork.
     Maroon is the logo/label colour; gold is the jar and the ghee itself. */
  --color-primary: #551512;          /* SSV maroon — the brand anchor */
  --color-primary-deep: #3d0f0d;
  --color-primary-light: #7a2a25;
  --color-primary-soft: rgba(85, 21, 18, 0.08);

  --color-accent: #eeaf2b;           /* jar gold — the "golden touch" */
  --color-accent-deep: #c9871a;
  --color-gold: #eeaf2b;
  --color-amber: #d9a441;
  /* Lifted gold for small text on maroon/dark grounds. #eeaf2b falls to
     4.94:1 and #d9a441 to 4.27:1 against the light end of the CTA gradient;
     this holds 6.26:1 there, clearing AA for 12px eyebrows. */
  --color-gold-light: #f5cc5e;

  /* Warm brown retained for secondary copy and the softer UI furniture. */
  --color-brown: #8b6f47;
  --color-brown-deep: #6f5836;

  /* ---------- Surfaces ---------- */
  --color-dark: #2b1a09;             /* deep roasted brown, from the artwork */
  --color-dark-2: #3d2411;
  --color-light: #faf4ec;            /* cream, sampled from the packaging */
  --color-surface: #ffffff;
  --color-surface-alt: #fbf0de;      /* warmer cream for alternating bands */

  /* ---------- Text ---------- */
  --color-text: #241c12;             /* 14.4:1 on --color-light */
  --color-text-soft: #5c4f3d;        /*  7.2:1 on --color-light */
  --color-text-mute: #6d6152;        /*  5.3:1 on --color-light — AA body */
  --color-text-invert: #faf4ec;
  --color-text-invert-soft: rgba(250, 244, 236, 0.78);

  /* ---------- Lines & borders ---------- */
  --color-border: rgba(85, 21, 18, 0.14);
  --color-border-strong: rgba(85, 21, 18, 0.28);
  --color-border-invert: rgba(250, 244, 236, 0.16);

  /* ---------- Gradients ---------- */
  --gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, #8a2f22 100%);
  --gradient-gold: linear-gradient(135deg, #ffd884 0%, var(--color-accent) 55%, var(--color-accent-deep) 100%);
  /* The ghee itself: pale butter through jar gold into a warm amber edge. */
  --gradient-warm: linear-gradient(135deg, #ffe9a8 0%, #f5cc5e 28%, var(--color-accent) 60%, #b8791a 100%);
  --gradient-dark: linear-gradient(165deg, var(--color-dark) 0%, #1a0f05 100%);
  --gradient-cta: linear-gradient(140deg, var(--color-primary) 0%, #7a2a25 100%);

  /* ---------- Glassmorphism ---------- */
  --glass-bg: rgba(250, 244, 236, 0.07);
  --glass-bg-hover: rgba(250, 244, 236, 0.12);
  --glass-border: rgba(250, 244, 236, 0.16);
  --glass-blur: blur(14px);

  /* ---------- Typography ---------- */
  --font-sans: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Georgia", "Iowan Old Style", "Times New Roman", serif;

  /* Fluid type: clamp(min, preferred, max) so nothing needs a media query */
  --font-size-h1: clamp(2.5rem, 6vw, 4.5rem);      /* 40px → 72px */
  --font-size-h2: clamp(1.875rem, 4vw, 2.5rem);    /* 30px → 40px */
  --font-size-h3: clamp(1.25rem, 2vw, 1.5rem);     /* 20px → 24px */
  --font-size-h4: 1.125rem;
  --font-size-body: 1.1rem;
  --font-size-sm: 0.9375rem;
  --font-size-xs: 0.8125rem;
  --font-size-eyebrow: 0.75rem;

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

  --line-height-tight: 1.1;
  --line-height-heading: 1.25;
  --line-height-body: 1.8;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-wide: 0.22em;

  /* ---------- Spacing scale ---------- */
  --space-xs: 0.25rem;    /*  4px */
  --space-sm: 0.5rem;     /*  8px */
  --space-md: 0.75rem;    /* 12px */
  --space-lg: 1rem;       /* 16px */
  --space-xl: 1.5rem;     /* 24px */
  --space-2xl: 2rem;      /* 32px */
  --space-3xl: 3rem;      /* 48px */
  --space-4xl: 4rem;      /* 64px */
  --space-5xl: 6rem;      /* 96px */

  --section-padding: clamp(4.5rem, 9vw, 7.5rem);
  --container-max: 1200px;
  --container-gutter: clamp(1.25rem, 4vw, 2rem);

  /* ---------- Radii ---------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-sm: 0 2px 10px rgba(36, 28, 18, 0.06);
  --shadow-md: 0 10px 30px rgba(36, 28, 18, 0.10);
  --shadow-lg: 0 22px 56px rgba(36, 28, 18, 0.14);
  --shadow-accent: 0 14px 34px rgba(238, 175, 43, 0.34);
  --shadow-primary: 0 14px 34px rgba(85, 21, 18, 0.28);

  /* ---------- Motion ---------- */
  /* Hard ceiling of 400ms per the brief — nothing here exceeds it. */
  --transition-fast: 150ms;
  --transition-base: 300ms;
  --transition-slow: 400ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ---------- Layout constants ---------- */
  --nav-height: 76px;
  --z-nav: 100;
  --z-menu: 99;
  --z-top: 90;

  /* ---------- Breakpoints (reference only) ----------
     Custom properties cannot be used inside @media queries, so these
     document the scale that layout.css hard-codes. Keep them in sync. */
  --breakpoint-mobile: 640px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1440px;
}