/* ==========================================================================
   TOKENS — design variables for the whole site
   Change a value here and it updates everywhere it is used.
   ========================================================================== */

/* ---------- Fonts (self-hosted, see assets/fonts) ---------- */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/jetbrains-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Colours ---------- */
  --color-bg:            #fdf3ee;   /* page background (cream) */
  --color-surface:       #ffffff;   /* cards, header */
  --color-ink:           #1a1a1a;   /* long text */
  --color-ink-muted:     #57514d;   /* captions, secondary text */
  --color-line:          #ead9cf;   /* thin borders on cream */

  --color-accent:        #d35017;   /* buttons, icons, accent lines (platform orange) */
  --color-accent-hover:  #b5420f;
  --color-accent-text:   #b5420f;   /* small orange text: eyebrows, links */
  --color-accent-soft:   #fbe3d6;   /* icon backgrounds, highlights */

  --color-dark:          #141414;   /* dark bands, footer */
  --color-dark-surface:  #1f1f1f;   /* cards on dark bands */
  --color-dark-line:     #333333;
  --color-on-dark:       #ffffff;
  --color-on-dark-muted: #b9b3ae;

  /* ---------- Typography ---------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1.0625rem;
  --text-lg:   1.1875rem;
  --text-h3:   1.1875rem;
  --text-h2:   clamp(1.85rem, 3.2vw, 2.6rem);
  --text-h1:   clamp(2.3rem, 4.4vw, 3.5rem);

  --leading-tight: 1.15;
  --leading-body:  1.65;

  /* ---------- Spacing ---------- */
  --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-padding: clamp(4rem, 9vw, 7rem);

  /* ---------- Shape & depth ---------- */
  --radius-sm: 4px;   /* buttons, chips */
  --radius:    6px;   /* cards */
  --accent-line: 3px; /* coloured line on the left of cards */

  --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.04);
  --shadow:    0 12px 32px -12px rgba(20, 20, 20, 0.14);

  /* ---------- Layout ---------- */
  --container: 1180px;
  --gutter:    clamp(1.25rem, 4vw, 2rem);
  --header-h:  72px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration: 0.6s;
}