/* ==========================================================================
   GLOW design system: tokens
   --------------------------------------------------------------------------
   Source: DESIGN-SPEC.md section 2. The approved reference is the homepage
   (index.html, inline #home-luxe): white page, Instrument Serif display with
   one italic word, square corners, black buttons, generous whitespace.

   Rules carried by these tokens
   - Monochrome only. No accent colour (bronze #9A6A4B is retired).
   - Radius 0 everywhere. No shadows anywhere (not even the open drawer:
     it sits on a scrim instead).
   - Every raw colour value in the system lives in this file. components.css
     only ever reads var(--*).

   Fonts
   - Display: Instrument Serif 400, regular + italic. The two faces below are
     copied from /assets/fonts.css (same files, same CDN), declared here at
     true size, which is how the homepage uses them. No new web font is added.
   - Text: the existing --font-body stack from fonts.css. Inter is named first
     but is not served as a web font today, so most readers get the system
     sans (San Francisco on Apple, Segoe UI on Windows, Roboto on Android).
     That is exactly what the approved homepage renders with.
   - The GLOW wordmark is the inline SVG in the header/drawer/footer partials,
     traced from the homepage mark (/assets/logos/glow-logo.png), so ds- pages
     and the homepage show the same mark. The Lexend Deca import in fonts.css
     is not needed by ds- pages.
   ========================================================================== */

@font-face {
  font-family: 'Instrument Serif';
  src: local('Instrument Serif'),
       url('https://cdn.jsdelivr.net/fontsource/fonts/instrument-serif@latest/latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: local('Instrument Serif Italic'),
       url('https://cdn.jsdelivr.net/fontsource/fonts/instrument-serif@latest/latin-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  /* ---------- Families ---------- */
  --font-display: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ---------- Type scale: PHONE values (mobile first) ----------
     Desktop values are set in the min-width: 900px block below.        */
  --fs-display-xl: 48px;   /* home + hub H1 */
  --fs-display-l: 40px;    /* ranking, review, article H1 */
  --fs-display-m: 30px;    /* section H2 */
  --fs-display-s: 22px;    /* H3, FAQ question, rank card name */
  --fs-display-xs: 20px;   /* card title */
  --fs-score: 44px;        /* GLOW Score numeral */
  --fs-text-l: 18px;       /* dek, standfirst */
  --fs-text: 16px;         /* body */
  --fs-text-s: 14px;       /* card copy, table */
  --fs-meta: 13px;         /* byline, caption, price note */
  --fs-kicker: 11px;       /* eyebrows, labels, breadcrumb (caps) */
  --fs-button: 12px;       /* primary button label (caps) */

  --lh-display-xl: 1.0;
  --lh-display-l: 1.05;
  --lh-display-m: 1.1;
  --lh-display-s: 1.2;
  --lh-display-xs: 1.25;
  --lh-score: 1.0;
  --lh-text-l: 1.5;
  --lh-text: 1.65;
  --lh-text-s: 1.5;
  --lh-meta: 1.4;
  --lh-kicker: 1.3;

  --track-display: -0.01em;
  --track-kicker: 0.18em;   /* house caps tracking (see report: spec 0.12em) */
  --track-button: 0.16em;

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

  --section-gap: 56px;          /* 96 on desktop */
  --head-gap: var(--space-5);   /* component to its heading */

  /* ---------- Grid ---------- */
  --grid-cols: 4;               /* 8 at 600+, 12 at 1200+ */
  --gutter: 16px;               /* 24 at 900+ */
  --margin: 16px;               /* 24 at 600+, 40 at 1200+ */

  --w-page: 1280px;
  --w-container: 1120px;
  --w-prose: 680px;
  --w-answer: 760px;

  /* Breakpoints (for reference; custom properties cannot drive @media):
     600px, 900px, 1200px.                                               */

  /* ---------- Colour (monochrome only) ---------- */
  --black: #000000;   /* footer, primary button, H1 rule, ticks */
  --ink: #111111;     /* all text and headings */
  --ink-2: #4A4A4A;   /* secondary text */
  --ink-3: #767676;   /* meta; AA on white, the floor for text */
  --rule: #D9D9D9;    /* hairlines */
  --tile: #F5F5F5;    /* packshot tiles, answer box only */
  --white: #FFFFFF;   /* every page background */
  --focus: #000000;   /* 2px outline, 2px offset */

  /* On the black ground (utility bar, footer) */
  --on-black: #FFFFFF;
  --on-black-2: #B3B3B3;   /* 9.4:1 on black */
  --on-black-rule: #333333;
  --focus-on-black: #FFFFFF;

  /* Overlays: drawer backdrop, image legibility. Black only. */
  --scrim: rgba(0, 0, 0, 0.48);

  /* ---------- Borders, radius, elevation ---------- */
  --radius: 0;
  --border-w: 1px;
  --border-hair: 1px solid var(--rule);
  --border-strong: 1px solid var(--ink);
  --border-h1: 3px solid var(--black);   /* above H1 on rankings, reviews, compare */
  --focus-ring: 2px solid var(--focus);
  --focus-offset: 2px;
  --shadow: none;

  /* ---------- Images ---------- */
  --ratio-hero: 4 / 5;        /* split hero, right column */
  --ratio-hub: 16 / 9;        /* hub editorial band */
  --ratio-product: 4 / 5;     /* product card packshot */
  --ratio-editorial: 3 / 2;   /* editorial card */
  --ratio-clinic: 4 / 3;      /* clinic and salon card */
  --ratio-headshot: 1 / 1;    /* black-and-white headshot */
  --packshot-pad: 12%;

  /* ---------- Controls ---------- */
  --tap-min: 32px;            /* minimum tap height anywhere */
  --tap-nav: 44px;            /* primary navigation, breadcrumb, FAQ */
  --button-h: 48px;
  --input-h: 48px;
  --masthead-h: 64px;         /* 80 on desktop */
  --wordmark-h: 17px;         /* glyph height of the homepage mark (glow-logo.png at 30px) */
  --drawer-w: min(360px, 88vw);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 0.15s;
  --dur: 0.25s;

  /* ---------- Layers ---------- */
  --z-sticky: 20;
  --z-nav-panel: 40;
  --z-scrim: 90;
  --z-drawer: 100;
  --z-totop: 80;
}

@media (min-width: 600px) {
  :root {
    --grid-cols: 8;
    --margin: 24px;
  }
}

@media (min-width: 900px) {
  :root {
    /* Desktop type */
    --fs-display-xl: 88px;
    --fs-display-l: 64px;
    --fs-display-m: 44px;
    --fs-display-s: 28px;
    --fs-display-xs: 22px;
    --fs-score: 56px;
    --fs-text-l: 20px;
    --fs-text: 17px;
    --fs-text-s: 15px;

    --section-gap: 96px;
    --gutter: 24px;
    --masthead-h: 80px;
  }
}

@media (min-width: 1200px) {
  :root {
    --grid-cols: 12;
    --margin: 40px;
  }
}