/* Design tokens. The only place where colours, sizes and durations are defined.
   Components consume these; a hard-coded hex or px value in a component is a defect. */

:root {
  /* Colour: paper, night, image. Nothing else. */
  --paper:      #E9E5DF;
  --paper-deep: #DFDAD1;
  --ink:        #1A1A18;
  --ink-muted:  #57564F;
  --night:      #0E100F;
  --line:       rgb(26 26 24 / 0.14);

  /* Logo palette: only for the abstract fields (hero, research cards), never for text or UI. */
  --logo-deep: #284888;
  --logo-mid:  #386898;
  --logo-teal: #48A8B8;
  --logo-cyan: #58C8D8;
  /* Neighbours of the logo blues for the research card fields, so the cards vary without leaving
     the brand: same coolness and depth, different hue. Fields only, never text or UI. */
  --field-indigo: #3B4096;
  --field-petrol: #1E5A63;
  --field-sea:    #2E7C72;
  --field-steel:  #4D6882;
  --field-dusk:   #55508F;
  --field-cobalt:  #2B56B0;
  --field-ocean:   #1F4E86;
  --field-glacier: #7FB4CF;
  --field-aqua:    #3EAFB2;
  --field-jade:    #3B8C78;
  --field-slate:   #3A4862;
  --field-plum:    #66508E;

  /* Signal: the one status tone the brief allows. Used only for a live state (the coming-soon
     page's current phase), at most twice per page. Never for text, links or decoration. */
  --signal: #58C8D8;

  /* Immutable copies for resetting inside a .night or overlay context */
  --ink-base:       #1A1A18;
  --ink-muted-base: #57564F;
  --line-base:      rgb(26 26 24 / 0.14);

  /* Counterparts on night surfaces */
  --ink-on-night:       var(--paper);
  --ink-muted-on-night: rgb(233 229 223 / 0.62);
  --line-on-night:      rgb(233 229 223 / 0.18);

  /* Image overlay */
  --overlay: linear-gradient(to top, rgb(14 16 15 / 0.75), rgb(14 16 15 / 0.2));

  /* Type */
  --font-sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Menu bar only: the tactical HUD labels. */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --step-display: clamp(2.75rem, 1.2rem + 6.2vw, 7rem);
  /* Home hero headline: about 10% below display, so the image keeps more of the frame. */
  --step-hero:    clamp(2.5rem,  1.1rem + 5.6vw, 6.25rem);
  --step-h2:      clamp(1.9rem,  1.1rem + 2.6vw, 3.25rem);
  --step-h3:      clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem);
  /* Card and footer titles: between h2 and h3, for headings that name rather than claim. */
  --step-title:   clamp(1.6rem,  1.2rem + 1.5vw, 2.5rem);
  --step-body:    clamp(1rem,    0.96rem + 0.2vw, 1.125rem);
  --step-small:   0.875rem;
  --step-micro:   0.75rem;

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

  --track-display: -0.03em;
  --track-h2:      -0.02em;
  --track-h3:      -0.01em;
  --track-caps:     0.08em;

  --leading-display: 1.02;
  --leading-h2:      1.08;
  --leading-h3:      1.2;
  --leading-title:   1.1;
  --leading-body:    1.55;
  --leading-small:   1.4;

  --measure: 34em;

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --section: clamp(6rem, 12vw, 11rem);
  --gutter:  clamp(1.25rem, 5vw, 5rem);
  --gap:     clamp(1rem, 2vw, 2rem);
  --container: 90rem; /* 1440px */

  /* Shape */
  --hairline: 1px;
  --radius: 0;
  --radius-sm: 2px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 180ms;
  --dur:      240ms;
  --dur-slow: 320ms;
  --dur-hero: 1400ms;

  /* Chrome */
  --header-height: 4.5rem;

  /* HUD frame (menu bar): one line width and colour for every line, borders and crosses alike. */
  --hud-line-width: 1px;
  --hud-arm:        7px;
  --hud-line:          rgb(26 26 24 / 0.3);
  --hud-line-on-night: rgb(233 229 223 / 0.3);
  /* Frosted glass behind the bar. One blur, kept small so it stays cheap to composite. */
  --glass:          rgb(233 229 223 / 0.76);
  --glass-on-night: rgb(14 16 15 / 0.56);
  --glass-solid:          rgb(233 229 223 / 0.96);
  --glass-solid-on-night: rgb(14 16 15 / 0.94);
  --glass-blur:     14px;
  /* Tints mixed from the text colour, so they work on either tone. */
  --tint-hover:  6%;
  --tint-active: 9%;

  /* Focus */
  --focus-width: 2px;
  --focus-offset: 3px;
}