/* =============================================================
   A GLITCH HOUSE — Foundation tokens (editor + hub)
   Dark-first. Mono-forward: JetBrains Mono + Inter.
   Global h1/h2 display rules intentionally omitted — product chrome
   uses its own type scale in editor.css.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Inks */
  --ink-0:       #0A0A0B;
  --ink-1:       #0F0F11;
  --ink-2:       #16161A;
  --ink-3:       #1F1F24;
  --ink-4:       #2A2A31;
  --ink-5:       #3B3B44;
  --ink-6:       #5C5C68;
  --ink-7:       #8B8B95;
  --ink-8:       #C4C4CA;
  --ink-9:       #EDEDEF;
  --ink-10:      #FFFFFF;

  /* Paper */
  --paper-0:     #FFFFFF;
  --paper-1:     #FAFAF7;
  --paper-2:     #F2F2EE;
  --paper-3:     #E5E5E0;
  --paper-4:     #CFCFC8;
  --paper-5:     #9E9E96;
  --paper-6:     #5E5E58;
  --paper-7:     #1A1A18;

  /* Signal */
  --signal:           #EC1F7B;
  --signal-hot:       #FF4A94;
  --signal-dim:       #B8135E;
  --signal-glow:      rgba(236, 31, 123, 0.18);

  /* Phosphor */
  --phosphor:         #3DE2B5;
  --phosphor-dim:     #28A884;

  /* Glitch channels (artwork-adjacent) */
  --channel-r:        #FF2D55;
  --channel-g:        #2DFFB6;
  --channel-b:        #2D7BFF;

  /* Semantic */
  --bg:               var(--ink-0);
  --surface:          var(--ink-1);
  --surface-raised:   var(--ink-2);
  --border:           var(--ink-4);
  --border-hard:      var(--ink-5);
  --fg:               var(--ink-9);
  --fg-muted:         var(--ink-7);
  --fg-dim:           var(--ink-6);
  --fg-display:       var(--ink-10);
  --accent:           var(--signal);
  --accent-fg:        var(--ink-10);
  --live:             var(--phosphor);

  /* Legacy aliases (hub + older rules) */
  --panel:            var(--surface);
  --panel-2:          var(--surface-raised);
  --line:             var(--border);
  --ink:              var(--fg);
  --muted:            var(--fg-muted);
  --accent-2:         var(--signal-hot);
  --radius:           var(--r-lg);

  /* State */
  --state-hover:      rgba(255, 255, 255, 0.04);
  --state-press:      rgba(255, 255, 255, 0.08);
  --state-focus:      var(--signal);
  --state-selected:   rgba(236, 31, 123, 0.12);

  /* Type families */
  --font-display: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale */
  --fs-caption:   11px;
  --fs-tag:       12px;
  --fs-small:     13px;
  --fs-body:      15px;
  --fs-body-lg:   17px;
  --fs-h6:        18px;
  --fs-h5:        22px;

  /* Weights */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* Tracking */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  /* Line-heights */
  --lh-tight:   1.0;
  --lh-snug:    1.15;
  --lh-normal:  1.5;

  /* Spacing */
  --sp-0:    0;
  --sp-05:   2px;
  --sp-1:    4px;
  --sp-2:    8px;
  --sp-3:    12px;
  --sp-4:    16px;
  --sp-5:    20px;
  --sp-6:    24px;
  --sp-8:    32px;

  /* Radii */
  --r-0:   0;
  --r-xs:  2px;
  --r-sm:  4px;
  --r-md:  6px;
  --r-lg:  10px;
  --r-xl:  16px;
  --r-full: 999px;

  /* Elevation */
  --shadow-0:  none;
  --shadow-1:  0 1px 0 0 rgba(255,255,255,0.03) inset,
               0 1px 2px rgba(0,0,0,0.35);
  --shadow-2:  0 1px 0 0 rgba(255,255,255,0.04) inset,
               0 4px 12px rgba(0,0,0,0.4);
  --shadow-3:  0 1px 0 0 rgba(255,255,255,0.05) inset,
               0 12px 32px rgba(0,0,0,0.55);
  --shadow-signal: 0 0 0 1px var(--signal),
                   0 0 24px var(--signal-glow);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-micro:     80ms;
  --dur-fast:      160ms;
  --dur-normal:    240ms;
}