/* aripone.com theme: every value the site uses lives here, and only here.
   To retheme: 1) change a colour, font, size or speed below and save; 2) reload any page, since
   site.css and the dot canvases (dots.js reads these with getComputedStyle) both follow it;
   3) run `python -m pytest tests -q -k "axe or palette"` to check contrast and that no colour leaked elsewhere.
   Rules: nothing but :root in this file, one comment per token, and colours never appear in any other file. */

:root {
  color-scheme: dark;                         /* native controls and scrollbars render dark */

  /* ---------- surfaces ---------- */
  --bg: #0A0B0C;                              /* page background, the "black field" */
  --surface: #111316;                         /* cards, panels, form wells */
  --surface-2: #171A1E;                       /* hovered card, raised panel */
  --line: #24272C;                            /* hairlines between sections and rows */
  --line-2: #33373E;                          /* stronger hairline: card borders, inputs at rest */

  /* ---------- text ---------- */
  --ink: #F1F2F3;                             /* headlines and body text */
  --ink-2: #A3A8AF;                           /* secondary text, nav links (8:1 on --bg) */
  --ink-3: #868B93;                           /* labels, captions, meta (5.6:1 on --bg, the lowest allowed) */

  /* ---------- signal: amber is money or work in motion, and the one primary action ---------- */
  --signal: #F2A33A;                          /* primary button, amber dots, active step */
  --signal-hi: #FFBC5E;                       /* primary button hover */
  --signal-ink: #1A1206;                      /* text on an amber fill */

  /* ---------- states (always named in text as well) ---------- */
  --ok: #86C9AC;                              /* sound / matched / sent */
  --bad: var(--signal);                       /* at risk / failed: amber, never red */

  /* ---------- dots (read by assets/dots.js) ---------- */
  --dot: var(--ink);                          /* ordinary particles */
  --dot-dim: #6F757D;                         /* legacy, idle or not-yet-settled particles */
  --dot-signal: var(--signal);                /* particles that carry money or work */
  --dot-label: var(--ink-3);                  /* mono labels drawn inside a canvas */
  --dot-density: 1;                           /* multiplies particle counts (0.5 = half the dots) */
  --dot-speed: 1;                             /* multiplies animation speed (0.5 = half speed) */
  --dot-size: 1;                              /* multiplies dot radius */

  /* ---------- type ---------- */
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;                   /* headlines and body */
  --font-mono: "Martian Mono", ui-monospace, Menlo, Consolas, monospace;        /* labels, numbers, code */
  --display-wdth: 112;                        /* Archivo width axis for uppercase headlines (62 to 125) */
  --label-wdth: 87.5;                         /* Martian Mono width axis for labels (75 to 112.5) */
  --weight-display: 640;                      /* headline weight */
  --weight-body: 400;                         /* body weight */
  --tracking-display: -0.02em;                /* headline letter spacing */
  --tracking-label: 0.08em;                   /* mono label letter spacing */
  --step--2: 0.75rem;                                         /* 12px: mono labels, the smallest functional text */
  --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);     /* small text, captions, nav */
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);          /* body */
  --step-1: clamp(1.125rem, 1.03rem + 0.45vw, 1.375rem);      /* lead paragraph */
  --step-2: clamp(1.375rem, 1.18rem + 0.9vw, 1.875rem);       /* h3, card titles */
  --step-3: clamp(1.75rem, 1.3rem + 2vw, 3rem);               /* h2, section titles */
  --step-4: clamp(2.125rem, 1.4rem + 3.4vw, 4.25rem);         /* statements, close */
  --step-5: clamp(2.5rem, 1.5rem + 4.4vw, 5rem);              /* h1 display */

  /* ---------- space (4, 8, 12, 16, 24, 32, 48, 64, 96, 144) ---------- */
  --s1: 4px;                                  /* hairline gaps */
  --s2: 8px;                                  /* tight gaps, label to text */
  --s3: 12px;                                 /* control padding */
  --s4: 16px;                                 /* default gap, phone gutter */
  --s5: 24px;                                 /* card padding */
  --s6: 32px;                                 /* gap between blocks */
  --s7: 48px;                                 /* section head to content */
  --s8: 64px;                                 /* small section padding */
  --s9: 96px;                                 /* section padding */
  --s10: 144px;                               /* large section padding */
  --gutter: clamp(16px, 4vw, 64px);           /* page side padding */
  --max: 1360px;                              /* widest content column */
  --header-h: 64px;                           /* sticky header height (also the scroll offset) */
  --measure: 64ch;                            /* longest comfortable line of body text */
  --tap: 44px;                                /* smallest touch target (buttons, answer chips, links on touch) */

  /* ---------- shape ---------- */
  --radius: 2px;                              /* buttons, inputs */
  --radius-card: 14px;                        /* cards and scene frames */
  --bracket: 8px;                             /* corner length on bracket buttons and frames */

  /* ---------- motion (all of it stops under prefers-reduced-motion) ---------- */
  --dur-1: 160ms;                             /* hovers, colour changes */
  --dur-2: 360ms;                             /* card lift, menu */
  --dur-3: 800ms;                             /* section entrances */
  --ease-out: cubic-bezier(.2, .7, .2, 1);    /* every transition */
  --lift: -6px;                               /* how far a card rises on hover */
  --rise: 28px;                               /* how far a section rises as it enters */
}