/* Eyesavers design tokens (v2: minimal / utility-first, after the Visionist reference).
   Use the semantic names in components; never raw hex. Mirror of design-tokens.md.
   In Elementor these map 1:1 to Site Settings → Global Colors / Global Fonts. */
:root {
  /* Surfaces */
  --c-surface: #FFFFFF;          /* page background */
  --c-surface-alt: #F4F4F2;      /* product tiles, quiet bands */
  --c-surface-inverse: #000000;  /* header, footer, dark bands (matches the logo background) */
  --c-surface-inverse-2: #141414;/* raised areas on dark */

  /* Text */
  --c-text: #0A0A0A;             /* primary text on light (19.8:1) */
  --c-text-2: #6B6B6B;           /* secondary text on light (5.3:1 on white, 4.9:1 on surface-alt) */
  --c-text-inverse: #FFFFFF;     /* primary text on dark */
  --c-text-inverse-2: #A3A3A3;   /* secondary text on dark (8.6:1) */

  /* Lines & accents */
  --c-line: #E2E2DF;             /* hairlines on light */
  --c-line-strong: #0A0A0A;      /* active / emphasised rules */
  --c-line-inverse: rgba(255, 255, 255, .16);
  --c-accent: #C9A24A;           /* logo gold: on dark only, sparingly */
  --c-accent-deep: #7A5C14;      /* gold on light (5.8:1), sparingly */
  --c-focus: #C9A24A;
  --c-error: #B42318;
  --c-whatsapp: #1F7A4D;

  /* Typography: one sans for everything, one serif reserved for the hero headline */
  --f-sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Cormorant Garamond", Georgia, serif;
  --fs-xs: 13px;                                        /* labels, meta (uppercase) */
  --fs-sm: 15px;                                        /* UI text, product info */
  --fs-base: 16px;                                      /* body */
  --fs-md: clamp(20px, 1.1rem + .5vw, 25px);            /* lead, card titles */
  --fs-lg: clamp(30px, 1.5rem + 1.3vw, 40px);           /* section titles */
  --fs-xl: clamp(40px, 1.9rem + 2.9vw, 65px);           /* page titles */
  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.5;
  --track-label: .08em;
  --track-tight: -.025em;

  /* Spacing (px): 4 8 16 24 32 48 64 96 128 */
  --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 32px;
  --s-6: 48px; --s-7: 64px; --s-8: 96px; --s-9: 128px;
  --section-y: var(--s-8);
  --gutter: var(--s-5);
  --container: 1320px;

  /* Shape & motion */
  --radius: 0;
  --dur-instant: 125ms;
  --dur-fast: 150ms;
  --dur-normal: 200ms;
  --dur-slow: 300ms;
  --dur-reveal: 500ms;  /* image/section reveals only */
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Hero-only legacy tokens (the approved video hero keeps its original look) */
  --c-ink: #000000;
  --c-ivory: #FAF6EE;
  --c-gold: #C9A24A;
  --c-on-ink-muted: #B9B3A6;
  --fs-display: clamp(2.75rem, 1.6rem + 4.6vw, 5.5rem);
}

/* Elementor default breakpoints: tablet ≤1024, mobile ≤767 */
@media (max-width: 1024px) { :root { --section-y: var(--s-7); --gutter: var(--s-4); } }
@media (max-width: 767px)  { :root { --section-y: var(--s-6); --gutter: var(--s-3); } }