/* Swype One — design tokens V2 · "SIGNAL DECK"
   A dark, tactile instrument surface: warm charcoal, luminous signal
   accent, physical window chrome. The product is touched, not read. */

@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk-400.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* --- Ground & panel ------------------------------------------------- */
  --deck:         #131210;   /* the desktop ground — warm charcoal      */
  --deck-2:       #181714;   /* slightly lifted ground                  */
  --panel:        #1e1c19;   /* windows, cards                          */
  --panel-2:      #26231f;   /* raised controls, hovered rows           */
  --panel-3:      #2e2b26;   /* active controls                         */
  --ink:          #ece8e1;   /* primary text — warm off-white           */
  --ink-2:        #a39d91;   /* secondary text                          */
  --ink-3:        #8a8574;   /* captions, metadata (≈4.6:1 on deck)     */
  --line:         rgba(236,232,225,.08);
  --line-2:       rgba(236,232,225,.14);
  --line-3:       rgba(236,232,225,.24);

  /* --- Accents --------------------------------------------------------- */
  --signal:       #ff4b24;   /* the brand current — intent, action      */
  --signal-deep:  #ff6a45;   /* signal for text on dark                 */
  --signal-soft:  rgba(255,75,36,.13);
  --go:           #9ede5f;   /* phosphor green — ready, approved, live  */
  --go-deep:      #b5e886;
  --go-soft:      rgba(158,222,95,.12);
  --amber:        #ffb020;   /* needs-you — the human boundary          */
  --amber-soft:   rgba(255,176,32,.13);
  --hot:          #ff5c5c;   /* blocked / destructive                   */
  --hot-soft:     rgba(255,92,92,.12);

  /* --- Semantic states --------------------------------------------------- */
  --state-ready:      var(--go);
  --state-working:    var(--signal);
  --state-needs-you:  var(--amber);
  --state-paused:     var(--ink-3);
  --state-blocked:    var(--hot);

  /* --- Typography --------------------------------------------------------- */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-text:    "Space Grotesk", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --fs-display: clamp(2.5rem, 1.7rem + 3.6vw, 4.4rem);
  --fs-h1:      clamp(1.6rem, 1.25rem + 1.6vw, 2.4rem);
  --fs-h2:      clamp(1.2rem, 1.05rem + 0.8vw, 1.5rem);
  --fs-h3:      1.05rem;
  --fs-body:    0.95rem;
  --fs-small:   0.83rem;
  --fs-micro:   0.72rem;

  --lh-display: 1.04;
  --lh-title:   1.2;
  --lh-body:    1.5;

  /* --- Spacing (4px base) --------------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.5rem;   --sp-6: 2rem;
  --sp-7: 3rem;     --sp-8: 4rem;     --sp-9: 6rem;

  /* --- Shape & depth --------------------------------------------------------- */
  --r-1: 8px;  --r-2: 12px; --r-3: 16px; --r-win: 14px; --r-pill: 999px;
  --icon-r: 26%;                /* app-icon squircle radius              */
  --shadow-win: 0 1px 0 rgba(255,255,255,.05) inset,
                0 24px 70px rgba(0,0,0,.55), 0 4px 18px rgba(0,0,0,.4);
  --shadow-pop: 0 10px 34px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35);
  --shadow-icon: 0 6px 18px rgba(0,0,0,.42), 0 1px 0 rgba(255,255,255,.09) inset;
  --glow-signal: 0 0 22px rgba(255,75,36,.35);

  /* --- Motion ----------------------------------------------------------------- */
  --ease-out:   cubic-bezier(.2,.7,.25,1);
  --ease-spring: cubic-bezier(.34,1.4,.44,1);
  --dur-1: 130ms; --dur-2: 240ms; --dur-3: 420ms; --dur-4: 800ms;

  /* --- Layout ------------------------------------------------------------------- */
  --shell: 1160px;
  --thread-w: 400px;
  --ease-soft: cubic-bezier(.4,.14,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; }
}