/* =========================================================================
   GigsHQ — design tokens · LIGHT
   White ground, near-black type, red as the only strong colour.
   Every text pair below was checked against the ground it sits on; the ratio
   is written next to it so a later edit cannot quietly break contrast.
   ========================================================================= */

@font-face {
  font-family: 'Antonio';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/antonio-bold-webfont.woff2') format('woff2');
}

@font-face {
  font-family: 'Antonio';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/antonio-regular-webfont.woff2') format('woff2');
}

:root {
  color-scheme: light;

  /* --- surfaces ------------------------------------------------------- */
  --ground:      #ffffff;
  --ground-deep: #faf9f8;   /* sticky header, closing band */
  --panel:       #fbfbfa;
  --panel-hi:    #ffffff;
  --panel-mock:  #fcfcfb;

  /* --- lines ---------------------------------------------------------- */
  --line:        #e7e5e2;
  --line-soft:   #f0efec;
  --line-strong: #d5d3ce;

  /* --- type ----------------------------------------------------------- */
  --ink:      #14161a;   /* 18.3:1 on white */
  --ink-2:    #474b53;   /*  8.4:1 */
  --ink-3:    #64686f;   /*  5.7:1 */
  --ink-4:    #6f737b;   /*  4.7:1 — captions stay legible */

  /* --- accent ---------------------------------------------------------
     --red carries white text at 4.99:1 and is the fill colour.
     --red-lit is the darker step for small red text on white (6.5:1);
     #d32f2f itself only reaches 4.99:1, which is too close to the line. */
  --red:      #d32f2f;
  --red-lit:  #b3261e;
  --red-deep: #8f1d17;
  --red-wash: rgba(211, 47, 47, 0.07);
  --red-edge: rgba(211, 47, 47, 0.30);

  /* --- typography ----------------------------------------------------- */
  --font-display: 'Antonio', 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --font-text: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'SFMono-Regular', ui-monospace, Consolas, 'Liberation Mono', monospace;

  /* shorter lines read faster; 54ch is about 11 words per line */
  --measure: 54ch;

  /* --- rhythm --------------------------------------------------------- */
  --shell: 1280px;
  --pad: 24px;
  --section-y: clamp(4.5rem, 9vw, 8.5rem);

  /* Linear renders its dividers at 0.8px, not 1px — the browser anti-aliases
     a sub-pixel border into a lighter line than any colour value can give you.
     Measured on linear.app: 57 elements, all 0.8px. */
  --hair: 0.8px;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  /* --- depth ----------------------------------------------------------
     On white, depth comes from a tight contact shadow plus a wide soft one.
     Black at high alpha turns cards grey and muddy. */
  --lift: 0 1px 2px rgba(20, 22, 26, 0.05),
          0 14px 30px -20px rgba(20, 22, 26, 0.20);
  --lift-hi: 0 1px 3px rgba(20, 22, 26, 0.07),
             0 26px 50px -24px rgba(20, 22, 26, 0.26);

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (max-width: 1023px) {
  :root { --pad: 20px; }
}

@media (max-width: 640px) {
  :root { --pad: 16px; }
}
