/* ============================================================================
   HYRO DESIGN SYSTEM — Colors & Type
   ----------------------------------------------------------------------------
   "Your daily dose of hero." Racing red on white, Lemon display + Perfectly
   Nineties serif. Bold, confident, distinctly Australian.
   ============================================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Lemon";
  src: url("fonts/Lemon-Bold.otf") format("opentype"),
       url("fonts/Lemon-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Perfectly Nineties";
  src: url("fonts/PerfectlyNineties-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Perfectly Nineties";
  src: url("fonts/PerfectlyNineties-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Perfectly Nineties";
  src: url("fonts/PerfectlyNineties-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Perfectly Nineties";
  src: url("fonts/PerfectlyNineties-SemiboldItalic.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Perfectly Nineties";
  src: url("fonts/PerfectlyNineties-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Perfectly Nineties";
  src: url("fonts/PerfectlyNineties-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Brand colors ---------- */
  /* Primary: Hyro Red — used everywhere. CTAs, backgrounds, accents. */
  --hyro-red:        #FB0D1B;
  /* NOTE: Hyro buttons do NOT darken on hover — they INVERT.
     Red-on-white becomes white-on-red (and vice versa) on hover, then
     snaps back to the solid fill on press. The two tokens below are kept
     for the rare cases (badges, table rows) where a darker shade is
     genuinely needed; never use them on buttons. */
  --hyro-red-deep:   #C50914;  /* darker shade for non-button surfaces */
  --hyro-red-wash:   #FFEEEF;  /* light pink tint for backgrounds */

  /* Neutrals */
  --hyro-white:      #FFFFFF;
  --hyro-cream:      #FFF4EC;  /* soft cream — alt page background */
  --hyro-cream-2:    #F7E9DC;  /* slightly darker cream */
  --hyro-ink:        #242424;  /* near-black, body + dark sections */
  --hyro-ink-2:      #111111;  /* true near-black for max contrast */

  /* Greyscale (used sparingly — body copy mostly --hyro-ink on white) */
  --hyro-grey-900:   #2B2B2B;
  --hyro-grey-700:   #4A4A4A;
  --hyro-grey-500:   #7A7A7A;
  --hyro-grey-300:   #C9C9C9;
  --hyro-grey-200:   #E4E4E4;
  --hyro-grey-100:   #F2F2F2;
  --hyro-line:       #E8DFD4;  /* hairline on cream */

  /* Flavour accents — official per-SKU colors. Used very sparingly: small
     badges, flavour pickers, product card highlights. NEVER for surfaces. */
  --flavour-watermelon:   #FFB0C0;
  --flavour-lemon-lime:   #C2FC77;
  --flavour-orange-mango: #FCC02D;
  --flavour-blackcurrant: #6C4FC6;
  --flavour-tropical:     #FC6F59;
  --flavour-variety:      #FFAC70;  /* mix-of-all-5 bundles */

  /* Semantic */
  --color-bg:        var(--hyro-white);
  --color-bg-alt:    var(--hyro-cream);
  --color-bg-dark:   var(--hyro-ink);
  --color-fg:        var(--hyro-ink);
  --color-fg-muted:  var(--hyro-grey-700);
  --color-fg-soft:   var(--hyro-grey-500);
  --color-fg-onred:  var(--hyro-white);
  --color-fg-ondark: var(--hyro-cream);
  --color-accent:    var(--hyro-red);
  --color-border:    var(--hyro-grey-200);
  --color-border-soft: var(--hyro-line);

  /* ---------- Type families ---------- */
  /* Display: chunky, hand-cut, friendly — for HYRO wordmark, big posters,
     hero numbers, badges, ALL-CAPS button labels. */
  --font-display: "Lemon", "Bagel Fat One", "Bowlby One SC", system-ui, sans-serif;

  /* Editorial: serif with strong italic personality. Body copy, callouts.
     Italics are signature — used on key words ("hero", "Hydrating"). */
  --font-serif:   "Perfectly Nineties", "Cormorant Garamond", "Source Serif Pro", Georgia, serif;

  /* Utility: clean sans for UI chrome, fine print, prices, nav labels. */
  --font-sans:    "Inter", "Helvetica Neue", Arial, sans-serif;

  /* ---------- Type scale ---------- */
  --fs-12: 0.75rem;   --fs-14: 0.875rem;
  --fs-16: 1rem;      --fs-18: 1.125rem;
  --fs-20: 1.25rem;   --fs-24: 1.5rem;
  --fs-28: 1.75rem;   --fs-32: 2rem;
  --fs-40: 2.5rem;    --fs-48: 3rem;
  --fs-64: 4rem;      --fs-80: 5rem;
  --fs-112: 7rem;     --fs-160: 10rem;

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 4px;     --space-2: 8px;
  --space-3: 12px;    --space-4: 16px;
  --space-5: 20px;    --space-6: 24px;
  --space-8: 32px;    --space-10: 40px;
  --space-12: 48px;   --space-16: 64px;
  --space-20: 80px;   --space-24: 96px;
  --space-32: 128px;

  /* ---------- Radii ---------- */
  --r-0: 0px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 10px;  /* rounded rectangle for buttons \u2014 corners rounded, edges square */

  /* ---------- Shadows ---------- */
  --shadow-sm:  0 1px 2px rgba(36,36,36,0.06);
  --shadow-md:  0 4px 12px rgba(36,36,36,0.08);
  --shadow-lg:  0 12px 32px rgba(36,36,36,0.12);
  --shadow-red: 0 6px 18px rgba(251,13,27,0.25);

  /* ---------- Layout ---------- */
  --container: 1280px;
  --container-narrow: 880px;
  --header-h: 72px;
  --header-h-mobile: 56px;
}

/* ---------- Element defaults ---------- */
html, body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Semantic type ---------- */
.h-display, h1.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.5rem, 9vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

h1, .h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2.5rem, 5.2vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-4);
}

h2, .h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
}

h3, .h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-24);
  line-height: 1.2;
  margin: 0 0 var(--space-3);
}

h4, .h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-18);
  line-height: 1.3;
  margin: 0 0 var(--space-2);
}

p, .p {
  font-family: var(--font-serif);
  font-size: var(--fs-18);
  line-height: 1.55;
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.lede {
  font-family: var(--font-serif);
  font-size: var(--fs-24);
  line-height: 1.35;
  font-style: italic;
  font-weight: 400;
}

em, .italic-accent {
  font-style: italic;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-14);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hyro-red);
  font-weight: 700;
}

.label, .ui-label {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.fineprint {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  color: var(--color-fg-muted);
  letter-spacing: 0.01em;
}

.poster {
  font-family: var(--font-display);
  font-size: clamp(5rem, 14vw, 12rem);
  line-height: 0.85;
  text-transform: uppercase;
  letter-spacing: -0.015em;
}

a {
  color: var(--hyro-red);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
a:hover { color: var(--hyro-red-deep); }

hr {
  border: 0;
  border-top: 1px solid var(--color-border-soft);
  margin: var(--space-8) 0;
}

/* ---------- Surfaces ---------- */
.surface-cream { background: var(--hyro-cream); color: var(--hyro-ink); }
.surface-red   { background: var(--hyro-red);   color: var(--hyro-white); }
.surface-dark  { background: var(--hyro-ink);   color: var(--hyro-cream); }
.surface-white { background: var(--hyro-white); color: var(--hyro-ink); }