:root {
  color-scheme: dark;

  /* Core: colors */
  --color-white-100: #f6f7fb;
  --color-gray-200: #d8dbe6;
  --color-gray-300: #c7c4d7;
  --color-gray-400: #908fa0;
  --color-gray-500: #6f7385;
  --color-navy-950: #0c0e12;
  --color-navy-925: #111318;
  --color-navy-900: #14182b;
  --color-surface-900: #1a1c20;
  --color-surface-850: #1e2024;
  --color-surface-800: #282a2e;
  --color-surface-750: #333539;
  --color-indigo-200: #e1e0ff;
  --color-indigo-300: #c0c1ff;
  --color-indigo-400: #8083ff;
  --color-indigo-500: #5c5ff6;
  --color-violet-400: #d0bcff;
  --color-violet-500: #8c66ff;
  --color-amber-400: #ffb783;
  --color-red-400: #ffb4ab;

  /* Core: typography */
  --font-display: "Manrope", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-label: "Inter", "Segoe UI", sans-serif;
  --ratio-phi: 1.618;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --font-size-hero: clamp(3.15rem, 5.2vw, 4.9rem);
  --font-size-display-sm: clamp(2rem, 4vw, 3rem);
  --font-size-body-lg: clamp(0.95rem, 1vw, 1rem);
  --font-size-body: 1rem;
  --font-size-body-sm: 0.875rem;
  --font-size-label: 0.75rem;

  --line-height-tight: 0.96;
  --line-height-body: 1.6;
  --letter-spacing-tight: -0.05em;
  --letter-spacing-display: -0.06em;
  --letter-spacing-label: 0.08em;

  /* Core: spacing */
  --space-2: 0.125rem;
  --space-4: 0.25rem;
  --space-6: 0.375rem;
  --space-8: 0.5rem;
  --space-10: 0.625rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-80: 5rem;
  --space-96: 6rem;

  /* Core: radius */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-pill: 9999px;
  --radius-control: 1.2rem;

  /* Core: shadow and glow */
  --shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.18);
  --shadow-elevated: 0 20px 60px rgba(0, 0, 0, 0.26);
  --shadow-card: 0 16px 48px rgba(0, 0, 0, 0.22);
  --glow-primary-soft: 0 0 34px rgba(128, 131, 255, 0.18);
  --glow-primary-strong: 0 0 52px rgba(128, 131, 255, 0.34);
  --glow-hero: radial-gradient(circle at center, rgba(128, 131, 255, 0.1) 0%, rgba(17, 19, 24, 0) 68%);

  /* Core: motion */
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 360ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-refinement: 420ms;
  --duration-refinement-fade: 280ms;
  --delay-refinement-pre-collapse: 220ms;
  --ease-refinement: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-thinking-orbit: 2800ms;
  --duration-thinking-pulse: 1800ms;
  --ease-thinking: linear;
  --duration-thinking-contour: 1900ms;
  --duration-thinking-contour-pulse: 2200ms;
  --ease-thinking-contour: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-thinking-contour-fade: 420ms;

  /* Core: layout */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --page-max-width: 76rem;
  --content-max-width: 60rem;
  --reading-max-width: 46rem;

  /* Semantic: surfaces */
  --bg-canvas: var(--color-navy-925);
  --bg-shell: rgba(17, 19, 24, 0.82);
  --bg-surface: var(--color-surface-850);
  --bg-surface-low: var(--color-surface-900);
  --bg-surface-high: var(--color-surface-800);
  --bg-surface-elevated: rgba(30, 32, 36, 0.76);

  /* Semantic: text */
  --text-primary: var(--color-white-100);
  --text-secondary: var(--color-gray-300);
  --text-muted: var(--color-gray-400);
  --text-accent: var(--color-indigo-300);
  --text-inverse: #0d1020;

  /* Semantic: borders */
  --border-soft: rgba(144, 143, 160, 0.22);
  --border-strong: rgba(144, 143, 160, 0.38);
  --border-focus: rgba(128, 131, 255, 0.52);

  /* Semantic: interactive */
  --accent-primary: var(--color-indigo-300);
  --accent-primary-strong: var(--color-indigo-400);
  --accent-primary-contrast: var(--text-inverse);
  --accent-secondary: var(--color-violet-400);
  --accent-danger: var(--color-red-400);

  /* Semantic: effects */
  --hero-radial-light: var(--glow-hero);
  --input-glow: var(--glow-primary-strong);
  --button-glow: 0 10px 32px rgba(128, 131, 255, 0.24);
  --card-glow: 0 0 30px rgba(128, 131, 255, 0.08);

  /* Component: shell */
  --topbar-height: 3.5rem;
  --topbar-bg: rgba(17, 19, 24, 0.8);
  --topbar-border: rgba(144, 143, 160, 0.08);
  --topbar-padding-x: 1.5rem;
  --shell-padding-x: clamp(1rem, 2.2vw, 1.4rem);
  --shell-padding-y: clamp(0.16rem, 0.45vw, 0.28rem);

  /* Component: hero */
  --hero-max-width: 42rem;
  --hero-gap: var(--space-32);
  --hero-title-size: var(--font-size-hero);
  --hero-subtitle-size: var(--font-size-body-lg);
  --hero-subtitle-max-width: 30rem;
  --hero-title-fill: linear-gradient(135deg, #ffffff 0%, #eef2ff 26%, #cbd5e1 70%, #64748b 100%);
  --hero-title-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07),
    0 8px 22px rgba(5, 8, 15, 0.16),
    0 16px 34px rgba(0, 0, 0, 0.12);

  /* Component: input shell */
  --prompt-control-radius: 1rem;
  --prompt-frame-radius: var(--prompt-control-radius);
  --prompt-frame-glow-gradient: linear-gradient(90deg, rgba(99, 102, 241, 0.98) 0%, rgba(147, 51, 234, 0.98) 100%);
  --prompt-frame-glow-opacity: 0.78;
  --prompt-frame-glow-thinking-opacity: 0.82;
  --prompt-frame-glow-blur: 14px;
  --prompt-frame-contour-width: 1.5px;
  --prompt-frame-contour-opacity: 0.74;
  --prompt-frame-thinking-orbit-opacity: 0.68;
  --prompt-frame-thinking-pulse-opacity: 0.92;
  --input-shell-height: 3.5rem;
  --input-shell-padding: var(--space-8);
  --input-shell-padding-x: var(--space-8);
  --input-shell-radius: var(--prompt-control-radius);
  --input-shell-bg: #0f172a;
  --input-shell-border: rgba(255, 255, 255, 0.04);
  --input-shell-hover-bg: var(--bg-surface);
  --input-shell-focus-glow: 0 0 0 1px rgba(129, 140, 248, 0.22);
  --input-icon-color: rgba(199, 196, 215, 0.7);
  --input-placeholder: #64748b;

  /* Component: prompt input */
  --prompt-input-font-size: clamp(1rem, 0.95vw, 1.125rem);
  --prompt-input-padding-x: var(--space-16);
  --prompt-input-padding-y: 0.8rem;

  /* Component: button */
  --button-height: 3rem;
  --button-padding-x: 1.5rem;
  --button-radius: var(--prompt-control-radius);
  --button-font-size: 0.875rem;
  --button-font-weight: var(--font-weight-medium);
  --button-bg: #4f46e5;
  --button-text: #ffffff;
  --button-shadow: 0 10px 28px rgba(79, 70, 229, 0.22);

  /* Component: chips */
  --chip-height: 1.75rem;
  --chip-padding-x: var(--space-10);
  --chip-radius: var(--radius-pill);
  --chip-bg: rgba(51, 53, 57, 0.12);
  --chip-border: rgba(144, 143, 160, 0.28);
  --chip-text: var(--text-secondary);
  --chip-hover-border: rgba(128, 131, 255, 0.52);
  --chip-hover-text: var(--accent-primary);

  /* Component: result card */
  --result-card-max-width: 42rem;
  --result-card-padding: clamp(1rem, 1.2vw, 1.2rem);
  --result-card-radius: 1.1rem;
  --result-card-bg: rgba(30, 32, 36, 0.9);
  --result-card-border: rgba(144, 143, 160, 0.18);
  --result-card-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  --result-card-title-size: 0.75rem;
  --result-card-title-letter-spacing: 0.08em;
  --refinement-subtitle-color: color-mix(in srgb, var(--text-muted) 88%, transparent);
  --refinement-groups-gap: var(--space-16);
  --refinement-group-gap: var(--space-8);
  --refinement-tags-gap-x: var(--space-8);
  --refinement-tags-gap-y: var(--space-8);
  --refinement-chip-min-height: 2rem;
  --refinement-chip-padding-x: 0.85rem;
  --refinement-chip-font-size: 0.84rem;
  --refinement-chip-line-height: 1.2;

  /* Component: copy action */
  --copy-button-min-width: 8rem;

  /* Component: footer */
  --footer-padding-y: clamp(2rem, 4vw, 4rem);
}

[data-theme="light"] {
  color-scheme: light;

  --bg-canvas: #f5f7fb;
  --bg-shell: rgba(255, 255, 255, 0.84);
  --bg-surface: #ffffff;
  --bg-surface-low: #f3f5fa;
  --bg-surface-high: #ffffff;
  --bg-surface-elevated: rgba(255, 255, 255, 0.92);

  --text-primary: #131725;
  --text-secondary: #485066;
  --text-muted: #6b7287;
  --text-accent: #4d57ff;
  --text-inverse: #ffffff;

  --border-soft: rgba(72, 80, 102, 0.14);
  --border-strong: rgba(72, 80, 102, 0.24);
  --border-focus: rgba(92, 95, 246, 0.42);

  --accent-primary: #5c5ff6;
  --accent-primary-strong: #8083ff;
  --accent-primary-contrast: #ffffff;
  --accent-secondary: #7755ff;

  --hero-radial-light: radial-gradient(circle at center, rgba(92, 95, 246, 0.12) 0%, rgba(245, 247, 251, 0) 70%);
  --input-glow: 0 0 44px rgba(92, 95, 246, 0.18);
  --button-glow: 0 12px 34px rgba(92, 95, 246, 0.18);
  --card-glow: 0 0 26px rgba(92, 95, 246, 0.06);

  --topbar-bg: rgba(255, 255, 255, 0.82);
  --topbar-border: rgba(72, 80, 102, 0.08);
  --input-shell-border: rgba(72, 80, 102, 0.1);
  --input-shell-hover-bg: #ffffff;
  --input-icon-color: rgba(72, 80, 102, 0.62);
  --input-placeholder: rgba(107, 114, 135, 0.78);
  --chip-bg: rgba(92, 95, 246, 0.04);
  --chip-border: rgba(72, 80, 102, 0.14);
  --chip-text: var(--text-secondary);
  --chip-hover-border: rgba(92, 95, 246, 0.42);
  --chip-hover-text: var(--accent-primary);
  --result-card-bg: rgba(255, 255, 255, 0.94);
  --result-card-border: rgba(72, 80, 102, 0.12);
  --shadow-soft: 0 14px 40px rgba(31, 41, 55, 0.08);
  --shadow-elevated: 0 18px 50px rgba(31, 41, 55, 0.12);
  --shadow-card: 0 16px 44px rgba(31, 41, 55, 0.1);
}

@media (max-width: 768px) {
  :root {
    --topbar-height: 3.75rem;
    --hero-gap: var(--space-12);
    --prompt-control-radius: 1.9rem;
    --input-shell-height: auto;
    --input-shell-padding: var(--space-6);
    --button-height: 2.95rem;
    --button-padding-x: 1rem;
    --result-card-padding: 0.85rem;
  }
}