/* ============================================================
   SOFAI — Theme tokens
   The design system: colors, type, spacing. Change values here,
   not in component styles. Editorial, minimal, restrained.
   ============================================================ */

:root {
  /* Brand palette (matched to interactivecourse tokens) */
  --olive:       #636B49;
  --olive-hover: #4F5538;  /* button hover (matches course) */
  --olive-dark:  #4A5036;
  --black:      #1A1A1A;
  --white:      #FFFFFF;
  --chrome:     #C0C0C0;

  /* Functional shades */
  --ink:        #2A2A28;               /* body text */
  --paper:      var(--white);
  --line:       #E4E5DF;               /* hairline borders */
  --line-soft:  #EEF0E9;
  --muted:      #74786C;               /* secondary text */
  --olive-tint: #F7F8F4;

  /* Type families */
  --font-head: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "PT Serif", Georgia, serif;

  /* Type scale (fluid, restrained) */
  --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.85rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  --step-1:  clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem);
  --step-2:  clamp(1.8rem, 1.5rem + 1.5vw, 2.6rem);
  --step-3:  clamp(2.6rem, 2rem + 3vw, 4.5rem);

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6.5rem;

  /* Layout */
  --measure: 64ch;       /* readable line length */
  --container: 1100px;   /* max page width */
  --radius: 0;           /* square corners — editorial, not decorative */

  /* Elevation */
  --shadow: 0 18px 50px -28px rgba(40, 44, 30, 0.45);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --speed: 200ms;
}