/* GRC Tools — Design Tokens. Always import first. */

/* DARK THEME */
html.grc-dark {
  --grc-bg-base: #080f1e;
  --grc-bg-surface: #0c1a36;
  --grc-bg-raised: #1a2e4a;
  --grc-bg-overlay: #1e3560;
  --grc-text-primary: rgba(255,255,255,.95);
  --grc-text-secondary: rgba(255,255,255,.60);
  --grc-text-muted: rgba(255,255,255,.40);
  --grc-interactive: #2563eb;
  --grc-interactive-hover: #1d4ed8;
  --grc-interactive-active: #1e40af;
  --grc-success: #22c55e;
  --grc-success-bg: rgba(34,197,94,.12);
  --grc-warning: #f59e0b;
  --grc-warning-bg: rgba(245,158,11,.12);
  --grc-danger: #ef4444;
  --grc-danger-bg: rgba(239,68,68,.12);
  --grc-info: #3b82f6;
  --grc-info-bg: rgba(59,130,246,.12);
  --grc-border: rgba(255,255,255,.10);
  --grc-border-strong: rgba(255,255,255,.20);
  --grc-border-focus: #2563eb;
  --grc-shadow-sm: 0 1px 3px rgba(0,0,0,.40);
  --grc-shadow: 0 4px 12px rgba(0,0,0,.50);
  --grc-shadow-lg: 0 8px 32px rgba(0,0,0,.60);
  --grc-glow: 0 0 0 3px rgba(37,99,235,.35);
  --grc-accent-text:  #60a5fa;
  --grc-danger-solid: #dc2626;
  color-scheme: dark;
}

/* LIGHT THEME */
html.grc-light {
  --grc-bg-base: #f0f4f8;
  --grc-bg-surface: #ffffff;
  --grc-bg-raised: #e8edf3;
  --grc-bg-overlay: #dde4ed;
  --grc-text-primary: rgba(10,15,30,.95);
  --grc-text-secondary: rgba(10,15,30,.65);
  --grc-text-muted: rgba(10,15,30,.40);
  --grc-interactive: #2563eb;
  --grc-interactive-hover: #1d4ed8;
  --grc-interactive-active: #1e40af;
  --grc-success: #15803d;
  --grc-success-bg: rgba(22,163,74,.10);
  --grc-warning: #b45309;
  --grc-warning-bg: rgba(217,119,6,.10);
  --grc-danger: #b91c1c;
  --grc-danger-bg: rgba(220,38,38,.10);
  --grc-info: #3b82f6;
  --grc-info-bg: rgba(59,130,246,.10);
  --grc-border: rgba(0,0,0,.12);
  --grc-border-strong: rgba(0,0,0,.22);
  --grc-border-focus: #2563eb;
  --grc-shadow-sm: 0 1px 3px rgba(0,0,0,.10);
  --grc-shadow: 0 4px 12px rgba(0,0,0,.12);
  --grc-shadow-lg: 0 8px 32px rgba(0,0,0,.16);
  --grc-glow: 0 0 0 3px rgba(37,99,235,.25);
  --grc-accent-text:  #1d4ed8;
  --grc-danger-solid: #b91c1c;
  color-scheme: light;
}

/* AUTO THEME */
@media (prefers-color-scheme: dark) {
  html.grc-auto {
    --grc-bg-base: #080f1e;
    --grc-bg-surface: #0c1a36;
    --grc-bg-raised: #1a2e4a;
    --grc-bg-overlay: #1e3560;
    --grc-text-primary: rgba(255,255,255,.95);
    --grc-text-secondary: rgba(255,255,255,.60);
    --grc-text-muted: rgba(255,255,255,.40);
    --grc-interactive: #2563eb;
    --grc-interactive-hover: #1d4ed8;
    --grc-interactive-active: #1e40af;
    --grc-success: #22c55e;
    --grc-success-bg: rgba(34,197,94,.12);
    --grc-warning: #f59e0b;
    --grc-warning-bg: rgba(245,158,11,.12);
    --grc-danger: #ef4444;
    --grc-danger-bg: rgba(239,68,68,.12);
    --grc-info: #3b82f6;
    --grc-info-bg: rgba(59,130,246,.12);
    --grc-border: rgba(255,255,255,.10);
    --grc-border-strong: rgba(255,255,255,.20);
    --grc-border-focus: #2563eb;
    --grc-shadow-sm: 0 1px 3px rgba(0,0,0,.40);
    --grc-shadow: 0 4px 12px rgba(0,0,0,.50);
    --grc-shadow-lg: 0 8px 32px rgba(0,0,0,.60);
    --grc-glow: 0 0 0 3px rgba(37,99,235,.35);
    --grc-accent-text:  #60a5fa;
    --grc-danger-solid: #dc2626;
    color-scheme: dark;
  }
}
@media (prefers-color-scheme: light) {
  html.grc-auto {
    --grc-bg-base: #f0f4f8;
    --grc-bg-surface: #ffffff;
    --grc-bg-raised: #e8edf3;
    --grc-bg-overlay: #dde4ed;
    --grc-text-primary: rgba(10,15,30,.95);
    --grc-text-secondary: rgba(10,15,30,.65);
    --grc-text-muted: rgba(10,15,30,.40);
    --grc-interactive: #2563eb;
    --grc-interactive-hover: #1d4ed8;
    --grc-interactive-active: #1e40af;
    --grc-success: #15803d;
    --grc-success-bg: rgba(22,163,74,.10);
    --grc-warning: #b45309;
    --grc-warning-bg: rgba(217,119,6,.10);
    --grc-danger: #b91c1c;
    --grc-danger-bg: rgba(220,38,38,.10);
    --grc-info: #3b82f6;
    --grc-info-bg: rgba(59,130,246,.10);
    --grc-border: rgba(0,0,0,.12);
    --grc-border-strong: rgba(0,0,0,.22);
    --grc-border-focus: #2563eb;
    --grc-shadow-sm: 0 1px 3px rgba(0,0,0,.10);
    --grc-shadow: 0 4px 12px rgba(0,0,0,.12);
    --grc-shadow-lg: 0 8px 32px rgba(0,0,0,.16);
    --grc-glow: 0 0 0 3px rgba(37,99,235,.25);
    --grc-accent-text:  #1d4ed8;
    --grc-danger-solid: #b91c1c;
    color-scheme: light;
  }
}

/* SHARED TOKENS — independent of theme */
:root {
  --grc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --grc-font-display: 'Arial Black', 'Arial Bold', Arial, sans-serif;
  --grc-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --grc-text-xs:   0.75rem;
  --grc-text-sm:   0.8125rem;
  --grc-text-base: 0.9375rem;
  --grc-text-md:   1rem;
  --grc-text-lg:   1.125rem;
  --grc-text-xl:   1.25rem;
  --grc-text-2xl:  1.5rem;
  --grc-text-3xl:  1.875rem;

  --grc-tracking-tight:  -0.02em;
  --grc-tracking-normal:  0em;
  --grc-tracking-wide:    0.02em;
  --grc-tracking-wider:   0.06em;

  --grc-space-1:  4px;
  --grc-space-2:  8px;
  --grc-space-3:  12px;
  --grc-space-4:  16px;
  --grc-space-5:  20px;
  --grc-space-6:  24px;
  --grc-space-8:  32px;
  --grc-space-10: 40px;
  --grc-space-12: 48px;
  --grc-space-16: 64px;

  --grc-radius-sm:   4px;
  --grc-radius:      8px;
  --grc-radius-md:   10px;
  --grc-radius-lg:   14px;
  --grc-radius-full: 9999px;

  --grc-topbar-height:     60px;
  --grc-sidebar-width:     240px;
  --grc-content-max-width: 1280px;

  --grc-transition: 150ms ease;
}