/* ==========================================================================
   AMEYRA GLOBAL — Design Tokens (single source of truth)
   Every spacing, colour, radius, shadow, type-size & motion value lives here.
   Components must reference these variables — never hard-coded values.
   ========================================================================== */
:root {
  /* Brand colours */
  --graphite: #2A2A2A;
  --ink: #222222;
  --stone: #B7A38A;
  --stone-deep: #9C876C;
  --sand: #CEC1AE;
  --ivory: #F7F5F0;
  --white: #FFFFFF;

  /* Neutrals */
  --gray-900: #222222;
  --gray-700: #4A4A4A;
  --gray-500: #6B6B6B;
  --gray-400: #999999;
  --gray-300: #D8D4CC;
  --gray-100: #EFEDE7;
  --line: rgba(42, 42, 42, 0.12);
  --line-soft: rgba(42, 42, 42, 0.08);

  /* Product accents */
  --oxyzen: #4F8FCB;
  --hydrozen: #3B8D87;
  --nitrozen: #6FB7E6;
  --aurozen: #B78E68;
  --thermazen: #D69247;

  /* Active accent (overridden per product page) */
  --accent: var(--stone);
  --accent-deep: var(--stone-deep);

  /* Typography */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Type scale (clamped, fluid) — Playfair (--font-display) is used ONLY on
     hero/page H1; every other level uses Inter (--font-body). */
  --fs-hero: clamp(2.8rem, 7vw, 6rem);
  --fs-display: clamp(2.8rem, 7vw, 6rem);
  --fs-h1: clamp(2.4rem, 5.2vw, 4.5rem);
  --fs-h2: clamp(2rem, 3.6vw, 3rem);
  --fs-h3: clamp(1.4rem, 2.2vw, 2rem);
  --fs-h4: clamp(1.15rem, 1.6vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 1.4vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;

  /* Spacing scale (8px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --sp-11: 160px;

  /* Section rhythm */
  --section-y: clamp(64px, 10vw, 160px);

  /* Radii (logo-derived) */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-hero: 32px;
  --r-panel: 40px;

  /* Shadows */
  --shadow-xs: 0 2px 6px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 6px 20px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.08);

  /* Layout */
  --container: 1440px;
  --container-narrow: 980px;
  --gutter: clamp(20px, 5vw, 80px);
  --nav-h: 80px;

  /* Motion */
  --ease-flow: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-precise: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.6s;
}