/* ============================================================
 * SCRATCH TOKENS — Scratch Proto design tokens
 *
 * The themable contract of the design language, and the ONLY
 * file an app needs to import to adopt it. Custom properties
 * inherit through shadow DOM, so this one :root block themes
 * every scratch-* component; each component also bakes in
 * var(..., fallback) defaults, so a missing token degrades
 * gracefully instead of breaking.
 *
 * Split out of scratch-proto.css (which keeps the demo pages'
 * reset + style-guide scaffolding). Token values are canon —
 * change them here, nowhere else.
 * ============================================================ */

:root {
  /* --- Surfaces ---
     bg-deep/bg are opaque (the substrate everything composites onto).
     The raised surfaces are --text-bright at low alpha, so they read as
     translucent tints and let the dot-grid / layering show through. */
  --bg-deep:       #08090c;
  --bg:            #0d0f14;
  --bg-surface:    color-mix(in srgb, var(--text-bright) 3%, transparent);
  --bg-elevated:   color-mix(in srgb, var(--text-bright) 6%, transparent);
  --bg-hover:      color-mix(in srgb, var(--text-bright) 10%, transparent);

  /* --- Text --- */
  --text:          #c8cdd8;
  --text-bright:   #e8ecf4;
  --text-muted:    #6b7280;
  --text-disabled: #565b69;

  /* --- Accent: Amber / Caution (primary; LOCKED) ---
     --accent is 100% saturation + 100% value (HSV). Each *-dim is the SAME
     color at 50% alpha — full saturation preserved, only opacity reduced, so
     dims are vivid translucent tints. --accent-hover drops saturation for a
     white-tinted lift. */
  --accent:        #ffae00;
  --accent-dim:    color-mix(in srgb, var(--accent) 50%, transparent);
  --accent-glow:   rgba(255, 174, 0, 0.12);
  --accent-hover:  #ffc64d;

  /* --- Secondary: Signal green (success / live) --- */
  --signal:        #00e47a;
  --signal-dim:    color-mix(in srgb, var(--signal) 50%, transparent);
  --signal-glow:   rgba(0, 228, 122, 0.08);

  /* --- Borders --- */
  --border:        #2a2e3a;
  --border-light:  #1e222c;
  --border-dashed: rgba(51, 56, 68, 0.67);   /* #333844 @ 0.67 — softened dividers + disabled border */

  /* --- Danger (error / destructive) --- */
  --danger:        #ff4444;
  --danger-dim:    color-mix(in srgb, var(--danger) 50%, transparent);
  --danger-glow:   rgba(255, 68, 68, 0.10);
  --warning:       var(--accent);

  /* --- Grid substrate --- */
  --grid-dot:      rgba(200, 205, 216, 0.08);
  --grid-size:     24px;

  /* --- Scanline overlay (alpha tweakable; 0 = off) --- */
  --scanline-alpha: 0.03;
  --scanline: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, var(--scanline-alpha)) 2px,
    rgba(0, 0, 0, var(--scanline-alpha)) 4px
  );

  /* --- Typography --- */
  --font-mono:     'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Fira Code', ui-monospace, monospace;
  --font-display:  'Space Grotesk', 'JetBrains Mono', monospace;
  --font-body:     'Quantico', 'Segoe UI', system-ui, sans-serif;  /* reading text */

  /* --- Type scale --- */
  --fs-micro:  10px;   /* labels, badges, build-stamp */
  --fs-tiny:   11px;   /* meta, captions */
  --fs-small:  12px;   /* secondary body, descriptions */
  --fs-body:   14px;   /* base */
  --fs-lg:     16px;   /* sidebar title */
  --fs-h3:     1.1rem;
  --fs-h2:     1.5rem;
  --fs-h1:     1.75rem;

  /* --- Spacing scale (NEW — neither repo had one) --- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;

  /* --- Applied spacing: component padding & gaps (tweakable · Density) ---
     Components reference THESE, not raw px, so padding/margins are iterable
     from one place. Defaults sit on the 4-based scale. */
  --pad-control-y: 8px;    /* buttons, inputs, tabs — vertical */
  --pad-control-x: 12px;   /* buttons, inputs, tabs — horizontal */
  --pad-card:      18px;   /* cards, list items, modal rows */
  --gap-stack:     8px;    /* vertical gap inside stacks */

  /* --- Radius: SQUARE by default. The system is hard-edged; the only
     rounded elements are true pills / dots (--r-pill). --- */
  --r-base:  0;
  --r-sm:    0;
  --r-md:    0;
  --r-lg:    0;
  --r-pill:  999px;

  /* --- Motion --- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);   /* the ONLY easing curve in the system */
  --dur-fast:    0.09s;   /* 25% faster than the original 0.12 / 0.15 / 0.25 */
  --dur:         0.11s;
  --dur-slow:    0.19s;

  /* --- Elevation --- */
  --shadow-pop: 0 2px 12px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 18px 50px rgba(0, 0, 0, 0.55);
}