/* Design tokens — single source of truth for all CSS files.
   Load order: tokens.css → base-overrides.css → workspace.css → page CSS */

:root {
  /* ── Color palette ──────────────────────────────────────── */
  --color-bg-primary:         #0d1117;
  --color-bg-secondary:       #161b22;
  --color-bg-tertiary:        #21262d;
  --color-bg-canvas:          #0d1117;
  --color-border-default:     #30363d;
  --color-border-muted:       #21262d;
  --color-text-primary:       #e0e6ed;
  --color-text-secondary:     #9ba4ae;
  --color-text-muted:         #848d97;
  --color-accent-blue:        #58a6ff;
  --color-accent-blue-bright: #388bfd;
  --color-accent-green:       #238636;
  --color-accent-red:         #da3633;
  --color-accent-yellow:      #d29922;
  --color-accent-purple:      #8b5cf6;

  /* ── Typography scale (12px floor) ─────────────────────── */
  --text-xs:    0.75rem;
  --text-sm:    0.8125rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;

  /* ── Spacing scale ─────────────────────────────────────── */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   0.75rem;
  --space-lg:   1rem;
  --space-xl:   1.5rem;

  /* ── Z-index layers ────────────────────────────────────── */
  --z-base:              0;
  --z-sticky:            5;
  --z-overlay:           100;
  --z-backdrop:          1040;
  --z-mobile-nav:        1050;
  --z-inspector-mobile:  1055;
  --z-mobile-toggle:     1060;
  --z-toast:             1090;
  --z-modal:             2000;
}

/* Dark theme (explicit) */
[data-theme="dark"] {
  --color-bg-primary:         #0d1117;
  --color-bg-secondary:       #161b22;
  --color-bg-tertiary:        #21262d;
  --color-bg-canvas:          #0d1117;
  --color-border-default:     #30363d;
  --color-border-muted:       #21262d;
  --color-text-primary:       #e0e6ed;
  --color-text-secondary:     #9ba4ae;
  --color-text-muted:         #848d97;
  --color-accent-blue:        #58a6ff;
  --color-accent-blue-bright: #388bfd;
  --color-accent-green:       #238636;
  --color-accent-red:         #da3633;
  --color-accent-yellow:      #d29922;
  --color-accent-purple:      #8b5cf6;
}

/* Light theme */
[data-theme="light"] {
  --color-bg-primary:         #ffffff;
  --color-bg-secondary:       #f6f8fa;
  --color-bg-tertiary:        #eaeef2;
  --color-bg-canvas:          #f0f3f6;
  --color-border-default:     #d1d9e0;
  --color-border-muted:       #eaeef2;
  --color-text-primary:       #1f2328;
  --color-text-secondary:     #656d76;
  --color-text-muted:         #8b949e;
  --color-accent-blue:        #0969da;
  --color-accent-blue-bright: #0550ae;
  --color-accent-green:       #1a7f37;
  --color-accent-red:         #cf222e;
  --color-accent-yellow:      #9a6700;
  --color-accent-purple:      #8250df;
}