/* ==========================================================================
   SPACE 1 - THEME
   Every colour, font, size, spacing value and animation timing used on the
   site lives in this one file. Change a value here and it updates on every
   page. The other stylesheets only ever use these variables.
   ========================================================================== */

/* Fonts (Google Fonts). To swap a font, change the @import and the
   --font-* variables below. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  /* ---- Colours ---- */
  --color-bg:            #05070a;   /* page background */
  --color-panel:         #0a0e14;   /* alternate section background */
  --color-panel-raised:  #0f141c;   /* cards */
  --color-text:          #eef1f4;   /* main text */
  --color-text-soft:     #c9d0d7;   /* paragraphs */
  --color-text-muted:    #99a3af;   /* captions, labels */
  --color-line:          rgba(255, 255, 255, 0.14);  /* borders and dividers */
  --color-accent:        #c9a45f;   /* gold highlight, links, chevrons */
  --color-accent-soft:   rgba(201, 164, 95, 0.14);
  --color-ink:           #06080b;   /* text on white buttons */
  --color-white:         #ffffff;

  /* ---- Fonts ---- */
  --font-display: "Outfit", "Segoe UI", Arial, sans-serif;       /* headings, buttons */
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;  /* small labels */
  --display-width: 100%;      /* how wide the heading font is stretched */

  /* ---- Type sizes ---- */
  --text-base:  16px;
  --text-small: 14px;
  --text-lead:  clamp(16px, 1.4vw, 19px);
  --text-h1:    clamp(36px, 6vw, 82px);
  --text-h2:    clamp(27px, 3.4vw, 45px);
  --text-h3:    clamp(17px, 1.5vw, 20px);

  /* ---- Layout ---- */
  --page-width:    1360px;
  --gutter:        clamp(16px, 4vw, 56px);   /* left/right page padding */
  --section-space: clamp(64px, 9vw, 128px); /* top/bottom padding of sections */
  --header-height: 74px;
  --radius:        4px;
  --radius-panel:  26px;

  /* ---- Motion ---- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --speed-fast:   0.2s;
  --speed-normal: 0.6s;
  --speed-slow:   1.1s;
  --reveal-distance: 32px;   /* how far elements travel when they fade in */
  --stagger:      80ms;      /* delay between items in a group */

  color-scheme: dark;
}