:root {
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --inline-space: var(--space-md);
  --inline-space-half: var(--space-sm);
  --block-space: var(--space-md);
  --block-space-half: var(--space-sm);
  --block-space-lg: var(--space-lg);
  --block-space-xl: var(--space-xl);
  --content-max-inline: 44rem;
  --content-max-inline-wide: 72rem;

  --font-display: "Avenir Next", "Segoe UI Variable Display", "Segoe UI", sans-serif;
  --font-body: "Manrope", "Avenir Next", "Segoe UI", sans-serif;
  --font-sans: var(--font-body);
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --leading-tight: 1.25;
  --leading-normal: 1.5;

  /* Wizzist brand palette */
  --color-primary: #4f46e5;
  --color-primary-strong: #4338ca;
  --color-accent: #7c3aed;
  --color-accent-soft: #c084fc;
  --color-neutral-100: #f8fafc;
  --color-neutral-200: #e2e8f0;
  --color-neutral-900: #0f172a;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-warning-soft: rgb(245 158 11 / 0.1);
  --color-warning-border: rgb(245 158 11 / 0.2);
  --color-danger: #ef4444;

  /* App theme */
  --theme-surface: var(--color-neutral-100);
  --theme-card: #ffffff;
  --theme-border: var(--color-neutral-200);
  --theme-text: var(--color-neutral-900);
  --theme-muted: #64748b;
  --theme-surface-subtle: #eef2ff;
  --theme-surface-muted: #e0e7ff;
  --theme-text-subtle: #334155;
  --theme-gradient-start: var(--color-primary);
  --theme-gradient-end: var(--color-accent);
  --theme-badge-bg: #e0e7ff;
  --theme-badge-text: #3730a3;
  --studio-rail-inline: 5rem;
  --studio-library-inline: 20rem;
  --studio-stage-card-min-inline: 20rem;
  --studio-tool-size: 3rem;
  --studio-tool-hover-bg: color-mix(in srgb, var(--theme-card) 74%, transparent);
  --studio-glass-surface: color-mix(in srgb, var(--theme-card) 16%, transparent);
  --studio-glass-border: color-mix(in srgb, var(--theme-card) 30%, transparent);
  --studio-glass-overlay-from: color-mix(in srgb, var(--color-neutral-900) 62%, transparent);
  --studio-glass-overlay-to: color-mix(in srgb, var(--color-neutral-900) 90%, transparent);
  --studio-input-focus-ring: color-mix(in srgb, var(--color-primary) 24%, transparent);
  --home-hero-grid-dot: color-mix(in srgb, var(--theme-text) 28%, transparent);
  --home-hero-focus-ring: color-mix(in srgb, var(--color-warning) 25%, transparent);
  --home-consumer-panel-bg: color-mix(in srgb, var(--theme-card) 94%, transparent);
  --home-creator-panel-start: color-mix(in srgb, var(--color-primary) 10%, var(--theme-card));
  --home-creator-panel-end: color-mix(in srgb, var(--color-warning) 8%, var(--theme-card));

  /* Legacy aliases used by existing component styles */
  --color-bg: var(--theme-surface);
  --color-bg-subtle: var(--theme-surface-subtle);
  --color-bg-muted: var(--theme-surface-muted);
  --color-surface: var(--theme-card);
  --color-surface-elevated: var(--theme-card);
  --color-ink: var(--theme-text);
  --color-ink-subtle: var(--theme-text-subtle);
  --color-ink-muted: var(--theme-muted);
  --color-muted-ink: var(--theme-muted);
  --color-border: var(--theme-border);
  --color-border-strong: #cbd5e1;
  --color-primary-foreground: #ffffff;
  --color-primary-hover: var(--color-primary-strong);
  --color-info: #6366f1;
  --color-warning-ink: #92400e;
  --canvas-bg: var(--color-bg);
  --canvas-modes-inline: 5rem;
  --canvas-activity-inline: 20rem;
  --canvas-stage-card-min-inline: 20rem;
  --canvas-mode-size: 3rem;
  --canvas-mode-hover-bg: color-mix(in srgb, var(--theme-card) 74%, transparent);
  --canvas-mode-active-bg: color-mix(in srgb, var(--color-primary) 14%, var(--theme-card));
  --basketball-court: #8b5cf6;
  --driver-road: #22c55e;
  --everest-ice: #60a5fa;
  --everest-summit: #f59e0b;
  --color-focus-ring: var(--color-primary);

  --radius-sm: 0.25rem;
  --radius-md: 0.4rem;
  --radius-lg: 0.7rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.07);
  --shadow-md: 0 6px 12px rgb(15 23 42 / 0.11);
  --shadow-card: 0 2px 8px rgb(15 23 42 / 0.08), 0 1px 3px rgb(15 23 42 / 0.05);
  --shadow-card-hover: 0 4px 14px rgb(15 23 42 / 0.12), 0 2px 5px rgb(15 23 42 / 0.06);
  --shadow-lg: 0 10px 28px rgb(15 23 42 / 0.18), 0 4px 10px rgb(15 23 42 / 0.09);

  --transition-fast: 120ms ease;
  --transition-base: 180ms ease;

  --color-quiz-tint: var(--color-primary);
  --color-flashcard-tint: var(--color-warning);
  --color-calculator-tint: var(--color-info);
  --color-math-tint: #3b82f6;
  --color-math-tint-subtle: #eff6ff;
  --message-background: var(--theme-card);
  --message-content-padding-inline: var(--space-sm);
  --message-content-padding-block-start: var(--space-sm);
  --message-content-padding-block-end: var(--space-sm);
  --layout-app-topnav-height: 3.75rem;
  --stream-layout-sidebar-inline: clamp(16rem, 22vw, 19rem);
}

/* Explicit dark mode */
:root[data-theme="dark"] {
  --theme-surface: var(--color-neutral-900);
  --theme-card: #1e293b;
  --theme-border: #334155;
  --theme-text: var(--color-neutral-100);
  --theme-muted: #94a3b8;
  --theme-badge-bg: #3730a3;
  --theme-badge-text: #e0e7ff;

  --color-bg-subtle: #162036;
  --color-bg-muted: #1f2a44;
  --color-ink-subtle: #c6d0e4;
  --color-border-strong: #475569;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.28);
  --shadow-md: 0 6px 12px rgb(0 0 0 / 0.35);
  --shadow-card: 0 2px 8px rgb(0 0 0 / 0.32), 0 1px 3px rgb(0 0 0 / 0.2);
  --shadow-card-hover: 0 4px 14px rgb(0 0 0 / 0.38), 0 2px 5px rgb(0 0 0 / 0.22);
  --shadow-lg: 0 10px 28px rgb(0 0 0 / 0.45), 0 4px 10px rgb(0 0 0 / 0.28);
  --color-quiz-tint: #818cf8;
  --color-flashcard-tint: #fbbf24;
  --color-calculator-tint: #60a5fa;
  --color-math-tint: #60a5fa;
  --color-math-tint-subtle: #1e3a5f;
}

/* System dark mode fallback */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --theme-surface: var(--color-neutral-900);
    --theme-card: #1e293b;
    --theme-border: #334155;
    --theme-text: var(--color-neutral-100);
    --theme-muted: #94a3b8;
    --theme-badge-bg: #3730a3;
    --theme-badge-text: #e0e7ff;

    --color-bg-subtle: #162036;
    --color-bg-muted: #1f2a44;
    --color-ink-subtle: #c6d0e4;
    --color-border-strong: #475569;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.28);
    --shadow-md: 0 6px 12px rgb(0 0 0 / 0.35);
    --shadow-card: 0 2px 8px rgb(0 0 0 / 0.32), 0 1px 3px rgb(0 0 0 / 0.2);
    --shadow-card-hover: 0 4px 14px rgb(0 0 0 / 0.38), 0 2px 5px rgb(0 0 0 / 0.22);
    --shadow-lg: 0 10px 28px rgb(0 0 0 / 0.45), 0 4px 10px rgb(0 0 0 / 0.28);
    --color-quiz-tint: #818cf8;
    --color-flashcard-tint: #fbbf24;
    --color-calculator-tint: #60a5fa;
    --color-math-tint: #60a5fa;
    --color-math-tint-subtle: #1e3a5f;
  }
}