/* ============================================================
   INCLINE Ventures — Design Tokens
   Source: design_handoff_incline_ventures/README.md § Design Tokens
   ============================================================ */

:root {
  /* ---- Colour ------------------------------------------------ */
  --black:      #0d0d0d;
  --white:      #f7f4f0;  /* warm off-white — never pure #fff */
  --red:        #BB271B;  /* primary accent */
  --red-dark:   #8a1a12;
  --red-light:  #d43c2f;
  --mid:        #706860;  /* muted text on light */
  --rule:       rgba(187, 39, 27, 0.22);

  /* Small red text on black needs lift to clear WCAG AA (4.9:1).
     --red itself is only 3.1:1 on --black, so it is reserved for
     fills, borders, and display-size type. */
  --red-on-dark: #e0503f;
  /* Muted text on black — #706860 is too dark to sit on #0d0d0d. */
  --mid-on-dark: #a49c92;

  /* ---- Semantic roles (black-led) ----------------------------
     The site is black throughout. Red is the structural accent —
     rules, numerals, arrows, and one full-bleed band per page.
     Off-white is reserved for type and hairlines: the hint. */
  --bg:          var(--black);
  --ink:         var(--white);
  --ink-muted:   var(--mid-on-dark);   /* 7.1:1 on black */
  --accent:      var(--red);           /* fills, borders, large type */
  --accent-text: var(--red-on-dark);   /* small red type — 4.9:1 */

  /* Hairlines are off-white at low alpha, never a grey hex.
     --line-strong is used on input borders and other UI boundaries,
     so it is held at 0.40 to clear WCAG 1.4.11 (3:1) on black. */
  --line:        rgba(247, 244, 240, 0.16);
  --line-strong: rgba(247, 244, 240, 0.40);
  --line-accent: rgba(187, 39, 27, 0.45);

  /* Section rhythm without leaving the palette: a red-tinted wash. */
  --wash:        rgba(187, 39, 27, 0.05);

  /* On the red bands, ink flips. */
  --on-red-ink:   var(--white);
  /* 0.78 alpha measured only 3.9:1 on #BB271B — below AA for body
     copy. 0.90 gives 4.8:1 and keeps the muted reading. */
  --on-red-muted: rgba(247, 244, 240, 0.90);
  --on-red-line:  rgba(247, 244, 240, 0.40);

  /* ---- Type -------------------------------------------------- */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
  --font-quote:   'Cormorant Garamond', Georgia, serif;

  /* Fluid scale */
  --step--2: clamp(0.66rem, 0.63rem + 0.13vw, 0.72rem);
  --step--1: clamp(0.80rem, 0.77rem + 0.16vw, 0.88rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.09rem);
  --step-1:  clamp(1.13rem, 1.06rem + 0.33vw, 1.31rem);
  --step-2:  clamp(1.35rem, 1.22rem + 0.63vw, 1.75rem);
  --step-3:  clamp(1.75rem, 1.47rem + 1.38vw, 2.63rem);
  --step-4:  clamp(2.25rem, 1.70rem + 2.75vw, 4.00rem);
  --hero:    clamp(3rem, 8vw, 7rem);

  /* ---- Space ------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.25rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6.5rem;

  /* Section rhythm — 72/64 desktop, 48/24 mobile (brand doc) */
  --section-y: clamp(3rem, 6vw, 4.5rem);
  --gutter:    clamp(1.5rem, 5vw, 4.5rem);

  /* ---- Motion ------------------------------------------------ */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur:      0.3s;   /* brand doc hover convention */
  --dur-slow: 0.55s;

  /* ---- Structure --------------------------------------------- */
  --max:    88rem;
  --hair:   1px;
  --radius: 0;  /* square corners everywhere. No exceptions on 1a. */
}