/* ═══════════════════════════════════════════════════════════════════════════
   SONIKI SOFTWARE — design tokens
   ───────────────────────────────────────────────────────────────────────────
   This file is the contract. Every colour, size, weight and timing the site
   uses is declared here and nowhere else. If you are retheming the site, this
   is the only file you need to touch.

   The one rule that makes the rest work: NO COMPONENT EVER NAMES A LITERAL
   COLOUR. Components style themselves with var(--bg), var(--fg), var(--rule)
   and friends. Because custom properties inherit, writing
   <section data-surface="dark"> flips that section, its cards, its hairlines
   and its links in one attribute.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* ── brand palette · immutable ─────────────────────────────────────────── */
  --sk-black:        #000000;
  --sk-white:        #ffffff;
  --sk-ink:          #0e1726;
  --sk-ultramarine:  #1b4de4;
  --sk-paper:        #edf0f4;
  --sk-slate:        #5b6779;
  --sk-mist:         #8e9bae;

  /* ── neutral ramp ──────────────────────────────────────────────────────── */
  --sk-grey-04: #fbfbfd;   /* nav ground                                     */
  --sk-grey-06: #f5f5f7;   /* grey section                                   */
  --sk-grey-12: #e8e8ed;   /* hairline on light                              */
  --sk-grey-45: #6e6e73;   /* muted on light — 4.97:1, passes AA at 17px     */
  --sk-grey-55: #86868b;   /* LARGE display text only — 3.57:1, fails AA     */
  --sk-grey-70: #a1a1a6;   /* muted on dark — 8.3:1                          */
  --sk-grey-88: #2b2b2e;   /* hairline on dark                               */

  /* ── SEMANTIC · light surface, the default ─────────────────────────────── */
  --bg:         var(--sk-white);
  --fg:         var(--sk-black);
  --fg-muted:   var(--sk-grey-45);
  --rule:       var(--sk-grey-12);
  --link:       var(--sk-ultramarine);
  --card-bg:    var(--sk-grey-06);
  --card-rule:  transparent;
  --chip-bg:    var(--sk-grey-06);

  /* ── typography ────────────────────────────────────────────────────────── */
  /* System stack only. On macOS/iOS this resolves to the real SF Pro, which
     is the Apple look itself — no font file, no CDN, no licence. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
          "Apple Color Emoji", "Segoe UI Emoji";

  --t-hero:  clamp(2.75rem,   1.20rem + 6.4vw, 5.00rem);
  --t-h1:    clamp(2.25rem,   1.20rem + 4.2vw, 3.75rem);
  --t-h2:    clamp(1.75rem,   1.10rem + 2.6vw, 2.75rem);
  --t-h3:    clamp(1.3125rem, 1.05rem + 1.1vw, 1.625rem);
  --t-lead:  clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem);
  --t-body:  1.0625rem;    /* 17px — Apple's body size */
  --t-small: 0.9375rem;    /* 15px */
  --t-micro: 0.75rem;      /* 12px — footer, legal */

  /* tracking — the Apple signature is negative on display sizes */
  --tr-hero:    -0.018em;
  --tr-h1:      -0.014em;
  --tr-h2:      -0.011em;
  --tr-h3:      -0.007em;
  --tr-body:    -0.003em;
  --tr-eyebrow:  0.075em;

  --lh-tight: 1.06;
  --lh-head:  1.12;
  --lh-lead:  1.35;
  --lh-body:  1.47;

  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;

  /* ── spacing · 4pt grid ────────────────────────────────────────────────── */
  --s-1:  0.25rem;  --s-2:  0.5rem;   --s-3:  0.75rem;  --s-4:  1rem;
  --s-5:  1.25rem;  --s-6:  1.5rem;   --s-8:  2rem;     --s-10: 2.5rem;
  --s-12: 3rem;     --s-16: 4rem;     --s-20: 5rem;     --s-24: 6rem;

  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);

  /* ── layout ────────────────────────────────────────────────────────────── */
  --wrap:      980px;      /* Apple's content measure */
  --wrap-wide: 1250px;
  --wrap-text: 44rem;      /* max comfortable measure for prose */
  --gutter:    clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  --nav-h:     48px;

  /* ── radii ─────────────────────────────────────────────────────────────── */
  --r-sm:   8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 980px;

  /* ── motion ────────────────────────────────────────────────────────────── */
  --ease:      cubic-bezier(0.28, 0.11, 0.32, 1);
  --dur-fast:  200ms;
  --dur:       620ms;
  --reveal-y:  24px;
  --reveal-stagger: 80ms;

  /* ── stacking ──────────────────────────────────────────────────────────── */
  --z-nav:  1000;
  --z-menu:  990;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SURFACES — the mechanism
   Write data-surface on a <section> and everything inside it inverts.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-surface="dark"] {
  --bg:        var(--sk-black);
  --fg:        var(--sk-white);
  --fg-muted:  var(--sk-grey-70);
  --rule:      var(--sk-grey-88);
  --link:      #5e9dff;               /* ultramarine is too dark on black */
  --card-bg:   #141416;
  --card-rule: var(--sk-grey-88);
  --chip-bg:   #1c1c1f;
}

[data-surface="grey"] {
  --bg:        var(--sk-grey-06);
  --fg:        var(--sk-black);
  --fg-muted:  var(--sk-grey-45);
  --rule:      #dcdce1;
  --card-bg:   var(--sk-white);
  --card-rule: transparent;
  --chip-bg:   var(--sk-white);
}