/* Will's Websites design tokens, 23 August 2026.
 *
 * The single definition of the palette, the type scale, the shape rules, the
 * shadows and the spacing ladder. Linked from every page BEFORE ww.css and
 * before any inline <style> block, so a page can override a usage but never a
 * definition.
 *
 * The system is monochrome, hairline and tint. There is effectively no colour:
 * one typeface, one text grey, one border grey, one wash, and shadows built
 * from near-white tints rather than black. Depth comes from a 1px #e5e5e8
 * border plus a 2px shadow in #f8f9fa, a shadow lighter than most card
 * backgrounds. The logo blue is rationed to primary actions, links, ticks and
 * focus rings. Hierarchy is carried by weight (400 against 600) and size.
 *
 * Contrast, checked against white:
 *   #2b2b2b  13.6:1   #000 21:1   #5e5e5e  5.9:1   #3b52ff  5.8:1
 *   #828282  3.9:1, which fails AA for small text. It is kept for icons and
 *            decorative marks only, never for words anyone has to read.
 */

:root {
  /* ── ground ─────────────────────────────── */
  --ww-paper:        #FFFFFF;                 /* page */
  --ww-plate:        #FFFFFF;                 /* cards, forms, nav */
  --ww-wash:         rgba(240,240,240,.33);   /* the 33% grey wash: gradient tails, pill fill, soft panels */
  --ww-wash-solid:   #FAFAFA;                 /* the wash composited on white, for places alpha cannot go */
  --ww-surface-alt:  #F9F9F9;                 /* opaque alternate panel */
  --ww-steel:        #000000;                 /* the one inverted panel */

  /* ── ink ────────────────────────────────── */
  --ww-ink:          #2B2B2B;  /* default text, h1 */
  --ww-ink-strong:   #000000;  /* h2, h3, wordmark */
  --ww-ink-2:        #5E5E5E;  /* secondary copy, meta, icons */
  --ww-ink-3:        #5E5E5E;  /* kept as an alias so older rules still resolve to a readable grey */
  --ww-ink-faint:    #828282;  /* decorative only: dots, dividers, disabled */
  --ww-on-dark:      #FFFFFF;
  --ww-on-dark-2:    rgba(255,255,255,.8);

  /* ── accent, rationed ───────────────────── */
  --ww-signal:       #3B52FF;  /* exact blue used by the double-W logo */
  --ww-signal-hover: #263EE7;
  --ww-signal-soft:  #ADC6FF;
  --ww-confirm:      #3B52FF;  /* the tick mark, the same blue */

  /* ── data ink, admin charts only ────────── */
  /* An ordinal ramp: one hue, four monotone lightness steps, light to dark,
   * anchored on the logo blue at step 3. Everything it encodes is ordered
   * (a stage in the journey, a step towards being billed), so the reader sees
   * the order in the colour rather than having to learn five arbitrary hues.
   * Never used for identity, and never on the customer-facing pages.
   * Checked against white: 2.5:1, 3.7:1, 5.5:1, 9.8:1, and the off step 2.2:1.
   * Adjacent lightness gaps all clear 0.06 in OKLCH, so every step is visibly
   * its own. Every slice and bar carries its label and its count in the
   * legend, so nothing here is read by colour alone. */
  --ww-data-1:       #8E9DFF;
  --ww-data-2:       #6478FF;
  --ww-data-3:       #3B52FF;
  --ww-data-4:       #1E2FB8;
  --ww-data-off:     #AEAEB2;  /* left the journey: outside the ramp on purpose */

  /* ── lines ──────────────────────────────── */
  --ww-rule:         #E5E5E8;          /* THE hairline. 1px, nearly every border */
  --ww-rule-strong:  rgba(0,0,0,.1);   /* on images and open states */
  --ww-field-border: #8A93A3;          /* form fields only: clears 3:1 for non-text contrast */

  /* ── shape ──────────────────────────────── */
  --ww-r-xs:       6px;    /* logo mark, small icon wells */
  --ww-r-sm:       8px;    /* chips */
  --ww-r-control:  10px;   /* inputs, DEFAULT */
  --ww-r-panel:    10px;   /* cards, DEFAULT */
  --ww-r-feature:  15px;   /* feature cards */
  --ww-r-pill:     17px;   /* the eyebrow pill */
  --ww-r-xl:       20px;   /* the dark call-to-action panel */
  --ww-r-showcase: 27px;   /* large screenshot carousel */
  --ww-r-btn:      22px;   /* buttons */
  --ww-r-media:    10px;   /* screenshots */
  --ww-r-badge:    100px;  /* round things: numerals, the portrait, the arrow disc */

  /* ── depth. tints, never black ──────────── */
  --ww-shadow-a:   #F8F9FA;
  --ww-shadow-b:   #F4F6FA;
  --ww-sh-card:    0 2px 6px 0 var(--ww-shadow-a);   /* the default card */
  --ww-sh-soft:    0 2px 10px 0 var(--ww-wash);
  --ww-sh-badge:   0 2px 5px 0 var(--ww-shadow-a);   /* the eyebrow pill */
  --ww-sh-btn:     0 5px 9px 0 var(--ww-shadow-b);   /* the primary button */
  --ww-sh-ghost:   0 5px 10px 0 var(--ww-shadow-a);  /* the ghost button */
  --ww-lip:        var(--ww-sh-btn);                  /* older name for the button shadow */

  /* ── type ───────────────────────────────── */
  /* One family for everything. Switzer, free from Fontshare, loaded in <head>. */
  --ww-display: 'Switzer', 'Switzer Placeholder', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ww-sans:    'Switzer', 'Switzer Placeholder', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Three hard breakpoints, 1200 / 810 / below, and hard values. Only the
     display sizes step down; everything 22px and under is fixed. */
  --ww-h1:    55px;   /* 40 / 30 */
  --ww-h2:    50px;   /* 34 / 26 */
  --ww-h3:    22px;   /* card titles, 20 under 1200 */
  --ww-h4:    42px;   /* figures, the dark panel heading. 32 / 30 */
  --ww-h6:    20px;   /* feature and FAQ headings. 18 under 1200 */
  --ww-lead:  18px;
  --ww-body:  16px;
  --ww-label: 15px;
  --ww-small: 15px;
  --ww-ui:    14px;   /* nav, buttons, pills, tags */

  --ww-w-display: 600;

  /* Negative tracking scales with size: tight at 55px, open at 14px. */
  --ww-track-h1: -.02em;   --ww-lh-h1: 1;
  --ww-track-h2: -.01em;   --ww-lh-h2: 1.05;
  --ww-track-h3:  .01em;   --ww-lh-h3: 1.1;
  --ww-track-h4:  0;       --ww-lh-h4: 1;
  --ww-track-ui:  .01em;
  --ww-track-eyebrow: .01em;

  /* ── space. the ladder that is actually in use ── */
  --ww-s-1:  5px;
  --ww-s-2:  8px;
  --ww-s-3:  10px;   /* the most common gap */
  --ww-s-4:  12px;
  --ww-s-5:  15px;
  --ww-s-6:  20px;
  --ww-s-7:  25px;
  --ww-s-8:  30px;
  --ww-s-9:  40px;
  --ww-s-10: 60px;

  /* Section rhythm: 100 standard, 130 hero, 120 tall blocks, 60 tight.
     Nothing between 60 and 100. */
  --ww-sec:       100px;
  --ww-sec-tall:  120px;
  --ww-sec-tight: 60px;
  --ww-gutter:    40px;   /* 35 / 20 */

  /* ── widths ─────────────────────────────── */
  --ww-shell:      1280px;
  --ww-content:    900px;
  --ww-measure:    800px;  /* heading measure: 600 / 550 */
  --ww-prose:      700px;

  /* ── motion ─────────────────────────────── */
  --ww-press: 120ms;
  --ww-ease:  cubic-bezier(.44, 0, .56, 1);

  /* ── focus ──────────────────────────────── */
  --ww-focus: #3B52FF;
}

@media (max-width: 1199.98px) {
  :root {
    --ww-h1: 40px; --ww-h2: 34px; --ww-h3: 20px; --ww-h4: 32px; --ww-h6: 18px;
    --ww-measure: 600px; --ww-gutter: 35px;
  }
}
@media (max-width: 809.98px) {
  :root {
    --ww-h1: 30px; --ww-h2: 26px; --ww-h4: 30px;
    --ww-lh-h1: 1.1; --ww-track-h1: -.01em;
    --ww-measure: 550px; --ww-gutter: 20px;
    --ww-sec: 60px; --ww-sec-tall: 80px;
  }
}