:root {
  /* Palette */
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-900: #1e3a5f;
  --blue-950: #0f2137;
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;

  /* Semantic roles */
  --color-heading:        var(--blue-950);
  --color-primary:        var(--blue-600);
  --color-primary-hover:  var(--blue-700);
  --color-primary-soft:   var(--blue-50);
  --color-interactive:    var(--blue-500);
  --color-accent:         var(--blue-400);
  --color-border:         var(--slate-200);
  --color-body:           var(--slate-500);
  --color-body-strong:    var(--slate-700);
  --color-surface:        #ffffff;
  --color-surface-alt:    var(--slate-50);
  --color-canvas-bg:      linear-gradient(135deg, var(--slate-50) 0%, var(--blue-50) 100%);

  /* Semantic aliases */
  --ink: var(--blue-950);
  /* Cool slate chosen for luminance and hue separation from --color-warning (#856404) */
  --ink-muted: var(--slate-500);
  --accent: var(--blue-400);

  /* Typography */
  --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --font-serif: 'Caveat', cursive;

  --type-display-size:   clamp(36px, 4.5vw, 56px);
  --type-display-weight: 800;
  --type-display-track:  -0.035em;

  --type-h2-size:   32px;
  --type-h2-weight: 800;
  --type-h2-track:  -0.03em;

  --type-h3-size:   18px;
  --type-h3-weight: 700;
  --type-h3-track:  -0.015em;

  --type-body-size:   15px;
  --type-body-weight: 400;

  --type-ui-size:     12px;

  --type-label-size:   11px;
  --type-label-weight: 700;
  --type-label-track:  0.08em;

  --type-mono-size: 13px;

  --type-weight-medium:   500;
  --type-weight-semibold: 600;

  /* Spacing scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;

  /* Radii */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-full: 999px;

  /* Shadows — all blue-tinted to match the landing CTA shadow */
  --shadow-panel-sm: 0 4px 12px rgba(15, 33, 55, 0.06);
  --shadow-panel-md: 0 10px 30px rgba(15, 33, 55, 0.08), 0 2px 6px rgba(15, 33, 55, 0.04);
  --shadow-panel-lg: 0 16px 40px rgba(15, 33, 55, 0.1),  0 3px 10px rgba(15, 33, 55, 0.05);
  --shadow-cta:      0 4px 16px rgba(37, 99, 235, 0.25);
  --shadow-cta-hover: 0 6px 24px rgba(37, 99, 235, 0.35);
  --shadow-focus:     0 0 0 3px rgba(37, 99, 235, 0.1);

  /* Status colors */
  --color-error:        #ef4444;  /* red-500 */
  --color-error-bg:     #fef2f2;  /* red-50 */
  --color-error-border: #fecaca;  /* red-200 */
  --color-success:        #16a34a;  /* green-600 */
  --color-success-bg:     #f0fdf4;  /* green-50 */
  --color-success-border: #bbf7d0;  /* green-200 */
  --color-warning:        #856404;
  --color-warning-bg:     #fef3cd;
  --color-warning-border: #ffc107;

  /* Drop zone — semantic names over existing blue palette */
  --color-dropzone-border:       var(--blue-200);
  --color-dropzone-border-hover: var(--blue-400);

  /* Disabled state — semantic names over existing slate palette */
  --color-disabled-bg: var(--slate-100);
  --color-disabled-fg: var(--slate-400);

  /* Toolpath line color — semantic alias over blue-950 */
  --color-toolpath: var(--color-heading);

  /* Z-index scale — replaces magic numbers (z-index: 5, 10) currently inline in shared.css */
  --z-canvas:       0;
  --z-panel:        5;
  --z-header:       10;
  --z-error-banner: 15;
  --z-nav-strip:    20;
  --z-notification: 100;
  --z-modal:        200;
  --z-drawer:       300;
}