/*
  SogaStudio design system: TOKENS (WO-2026-4372)
  Source of the palette and type: the logo Mike picked in WO-2026-4366
  ("round dot, colour + weight"), produced in WO-2026-4371.

  Fonts (both SIL OFL, zero spend):
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&family=IBM+Plex+Mono:wght@500&display=swap" rel="stylesheet">

  Every text pairing below carries its WCAG 2.x contrast ratio, measured
  with the relative-luminance formula. AA body text needs 4.5:1, large
  text and non-text marks need 3:1.
*/

:root {
  /* ─── Brand (from the logo, do not retune) ────────────────────── */
  --soga-terracotta:       #c4623a;  /* the round dot. A MARK colour, not a text colour on light (3.77:1) */
  --soga-terracotta-deep:  #9b3a2a;  /* the a + i on light. Text-safe: 6.40:1 on paper */
  --soga-terracotta-warm:  #d9805c;  /* the a + i on dark.  Text-safe: 6.31:1 on ink */

  /* ─── Neutrals ────────────────────────────────────────────────── */
  --soga-ink:      #141414;  /* 17.04:1 on paper. Same black as the rail-i */
  --soga-ink-2:    #5f5850;  /*  6.48:1 on paper. Body copy */
  --soga-ink-3:    #756d64;  /*  4.70:1 on paper. Eyebrows, meta, footer. Replaces #8a8279 (3.50:1, fails AA) */
  --soga-paper:    #f7f6f2;  /* page ground, carried from the current site */
  --soga-paper-2:  #efece5;  /* quiet band; ink-3 is 4.31:1 here, so use ink-2 for small text on it */
  --soga-white:    #ffffff;  /* inputs, raised cards */
  --soga-line:        #dddad4;
  --soga-line-strong: #c9c4bb;

  /* Dark ground */
  --soga-dark:       #141414;
  --soga-dark-2:     #1f1d1b;  /* raised surface on dark */
  --soga-on-dark:    #f7f6f2;  /* 17.04:1 */
  --soga-on-dark-2:  #c9c3ba;  /* 10.53:1, body on dark */
  --soga-on-dark-3:  #a8a198;  /*  7.21:1, meta on dark */
  --soga-dark-line:  #3a3632;

  /* Status */
  --soga-success: #2d6a4f;  /* 5.91:1 on paper */
  --soga-error:   #b33a3a;  /* 5.42:1 on paper */

  /* ─── Semantic (light is the default ground) ──────────────────── */
  --bg:          var(--soga-paper);
  --surface:     var(--soga-white);
  --fg:          var(--soga-ink);
  --muted:       var(--soga-ink-2);
  --subtle:      var(--soga-ink-3);
  --border:      var(--soga-line);
  --border-strong: var(--soga-line-strong);
  --accent:      var(--soga-terracotta-deep);   /* links, focus, hover fill */
  --mark:        var(--soga-terracotta);        /* dots, rules, non-text cues only */
  --input-bg:    var(--soga-white);

  /* ─── Type ────────────────────────────────────────────────────── */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --fw-regular: 400;
  --fw-medium:  500;   /* the word "SogaStudio" weight */
  --fw-bold:    700;   /* the a + i weight. The only bold in the system */

  /* Scale, ratio ~1.25 from 16px. Display is fluid. */
  --fs-micro:   12px;  /* eyebrow (mono, caps), footer */
  --fs-small:   14px;  /* nav, labels, buttons, meta */
  --fs-body:    16px;
  --fs-card:    15px;  /* body inside a cell/card */
  --fs-lede:    19px;
  --fs-h3:      18px;
  --fs-h2:      clamp(24px, 2.6vw, 30px);
  --fs-h1:      clamp(36px, 5.2vw, 64px);

  --lh-tight:   1.08;  /* h1 */
  --lh-snug:    1.25;  /* h2, h3 */
  --lh-body:    1.6;

  --ls-display: -0.02em;
  --ls-eyebrow: 0.12em;

  /* ─── Space (4px base) ────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --gutter:   56px;   /* page side padding, desktop. 24px under 860px */
  --measure:  680px;  /* max line length for prose */
  --content:  1120px; /* max content width */

  /* ─── Radius ──────────────────────────────────────────────────── */
  /* The rail-i is built from square bars, so corners stay tight.
     Round is reserved for the dot. */
  --radius-1: 2px;    /* inputs, buttons */
  --radius-2: 4px;    /* cards, panels */
  --radius-dot: 999px;

  /* ─── Motion ──────────────────────────────────────────────────── */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur:  140ms;
}

/* Dark ground: put .on-dark on any section (or the body) */
.on-dark {
  --bg:       var(--soga-dark);
  --surface:  var(--soga-dark-2);
  --fg:       var(--soga-on-dark);
  --muted:    var(--soga-on-dark-2);
  --subtle:   var(--soga-on-dark-3);
  --border:   var(--soga-dark-line);
  --border-strong: #4a4540;
  --accent:   var(--soga-terracotta-warm);
  --mark:     var(--soga-terracotta);   /* 4.52:1 on dark */
  --input-bg: var(--soga-dark-2);
}