/*
 * Hills Run Club - design tokens
 * Brand Guidelines 2026, v4.0. This file is the contract: if the deck and the
 * stylesheet disagree, the stylesheet is the bug.
 *
 * 64% white, 26% ink, 6% orange, 4% other. There is no mid grey - a page is
 * white or it is ink, and the photograph carries the colour.
 */
:root {
  /* ---- colour ---- */
  --signal:  #FC4B1F;  /* the brand. display type, fills, tags, blooms */
  --action:  #D93A00;  /* buttons and links, with a white label */
  --deep:    #B83208;  /* pressed */
  --glow:    #FF7A4D;  /* small orange text on ink or glass */
  --ink:     #1C1C1C;  /* headlines, body, dark bands, footer */
  --slate:   #62605D;  /* meta text and captions on light surfaces */
  --white:   #FFFFFF;  /* page ground and card bodies */
  --line:      #E6E2DC;  /* 1px, on light */
  --line-dark: #3A3A3A;  /* 1px, on ink */
  --meta-dark: #C9C9C9;  /* meta text on ink */

  --teal:   #436E7E;  /* Slate Blue - HRC+ member UI only */
  --green:  #33A100;  /* success and confirmed */
  --bronze: #A9763F;  /* finisher objects only; never in the interface */

  /* ---- surface ----
     Flat colour is the floor, not the ceiling. Depth comes from gradient,
     glass and light - never from a drop shadow. */
  --grad-ember:  linear-gradient(145deg, #FC4B1F, #D93A00, #C8400F, #8E3214);
  --grad-action: linear-gradient(145deg, #D93A00, #B83208, #A62D05);
  --grad-ink:    linear-gradient(165deg, #343434, #232323, #171717, #101010);
  --glow-soft:   rgba(252, 75, 31, .34);

  --glass:        rgba(255, 255, 255, .06);
  --glass-line:   rgba(255, 255, 255, .12);
  --glass-sheen:  rgba(255, 255, 255, .16);

  /* ---- type ----
     Gilroy only: 800 display, 700 titles and buttons, 400 reading. */
  --font: "Gilroy Family", Poppins, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --display-01: 96px; --display-01-lh:  96px; --display-01-ls: -0.032em;
  --display-02: 56px; --display-02-lh:  60px; --display-02-ls: -0.026em;
  --display-03: 36px; --display-03-lh:  40px; --display-03-ls: -0.024em;
  --title:      40px; --title-lh:       48px; --title-ls:      -0.022em;
  --subtitle:   24px; --subtitle-lh:    32px; --subtitle-ls:   -0.012em;
  --lead:       18px; --lead-lh:        28px;
  --body:       16px; --body-lh:        24px;
  --small:      14px; --small-lh:       20px;
  --label:      12px; --label-lh:       16px; --label-ls:       0.140em;

  --w-display: 800;
  --w-title:   800;
  --w-sub:     700;
  --w-lead:    400;
  --w-body:    400;
  --w-small:   400;
  --w-label:   700;

  --measure: 34em;   /* reading copy never exceeds it */

  /* ---- grid ---- */
  --container: 1200px;
  --margin:    72px;
  --gutter:    24px;
  --section:   112px;  /* 96-128 between bands, never inside */
  --header:    72px;

  /* ---- spacing: eight, and multiples of eight ---- */
  --s1:  8px;   /* inside a line group */
  --s2: 16px;   /* between related blocks */
  --s3: 24px;   /* between components */
  --s4: 32px;   /* between groups */
  --s5: 40px;   /* before a closing action */
  --pad:   28px;  /* inside every card and panel, all four sides */
  --stage: 24px;  /* inside a photo stage */

  /* ---- radius - no drop shadows anywhere ---- */
  --r-pill:  999px;
  --r-glass:  20px;
  --r-card:   16px;
  --r-input:  12px;
  --r-panel:  24px;

  /* ---- motion ---- */
  --ease-settle: cubic-bezier(.16, 1, .3, 1);
  --ease-travel: cubic-bezier(.4, 0, .2, 1);
  --ease-exit:   cubic-bezier(.4, 0, 1, 1);

  --t-tap:      120ms;
  --t-lift:     180ms;
  --t-reveal:   240ms;
  --t-settle:   320ms;
  --t-dismiss:  160ms;
  --t-intent:   160ms;
  --t-stagger:   40ms;

  /* ---- compatibility ----
     The ported header and a few legacy fragments still read the old kit
     names. Aliases, not a second palette. */
  --hrc-orange:    var(--signal);
  --hrc-black:     var(--ink);
  --hrc-text:      var(--ink);
  --hrc-teal:      var(--teal);
  --hrc-white:     var(--white);
  --hrc-grey-100:  var(--white);
  --hrc-grey-400:  var(--meta-dark);
  --hrc-grey-500:  var(--slate);
  --hrc-green:     var(--green);
  --hrc-font:      var(--font);
  --hrc-container: var(--container);
  --hrc-gap:       var(--s3);
  --hrc-radius-sm: var(--r-input);
  --hrc-radius-md: var(--r-card);
  --hrc-radius-pill: var(--r-pill);
  --hrc-h1-size:   var(--title);
  --hrc-h1-lh:     var(--title-lh);
  --hrc-h1-weight: var(--w-title);
  --hrc-h2-size:   var(--subtitle);
  --hrc-h2-weight: var(--w-sub);
  --hrc-body-size: var(--body);
  --hrc-small-size: var(--small);
  --hrc-light-weight: 300;
  --chalk: var(--white);   /* v4.0 removed chalk; anything still asking gets white */
}

@media (max-width: 1024px) {
  :root {
    --margin:  48px;
    --section: 96px;
    --display-01: 64px; --display-01-lh: 66px;
    --display-02: 48px; --display-02-lh: 52px;
  }
}

@media (max-width: 767px) {
  :root {
    --display-01: 48px; --display-01-lh: 52px;
    --display-02: 40px; --display-02-lh: 44px;
    --display-03: 30px; --display-03-lh: 36px;
    --title:      30px; --title-lh:      36px;
    --subtitle:   20px; --subtitle-lh:   28px;

    --margin:  20px;
    --gutter:  16px;
    --section: 80px;
  }
}