/*
 * Precision UI design tokens.
 * Light is the default. Set data-theme="dark" on a subtree to opt in.
 */

:root {
  color-scheme: light;

  --color-neutral-0: #ffffff;
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f7;
  --color-neutral-200: #ebecef;
  --color-neutral-300: #d5d7dc;
  --color-neutral-400: #b0b4bc;
  --color-neutral-500: #858a93;
  --color-neutral-600: #5e626a;
  --color-neutral-700: #3b3e44;
  --color-neutral-800: #25272b;
  --color-neutral-900: #17181b;
  --color-neutral-950: #090a0c;
  --color-neutral-1000: #000000;

  --color-canvas: #f5f5f7;
  --color-surface: #ffffff;
  --color-surface-subtle: #fafafa;
  --color-surface-raised: #ffffff;
  --color-surface-sunken: #ebecef;
  --color-surface-inverse: #111214;
  --color-surface-glass-structural: rgba(255, 255, 255, 0.88);
  --color-surface-glass-media: rgba(255, 255, 255, 0.18);
  --color-surface-glass-dark: rgba(20, 23, 30, 0.68);
  --color-surface-glass-fallback-dark: #182033;
  --color-backdrop: rgba(9, 10, 12, 0.48);
  --color-scrim-media: rgba(7, 17, 42, 0.4);

  --color-text-primary: #111214;
  --color-text-secondary: #5e626a;
  --color-text-tertiary: #6b7078;
  --color-text-disabled: #b0b4bc;
  --color-text-inverse: #ffffff;
  --color-text-glass: #ffffff;
  --color-text-glass-muted: rgba(255, 255, 255, 0.78);
  --color-icon-primary: #25272b;
  --color-icon-secondary: #6f747d;
  --color-icon-disabled: #b0b4bc;

  --color-border-subtle: #ebecef;
  --color-border-default: #d5d7dc;
  --color-border-strong: #b0b4bc;
  --color-border-glass-structural: rgba(17, 18, 20, 0.1);
  --color-border-glass-media: rgba(255, 255, 255, 0.3);
  --color-divider: rgba(17, 18, 20, 0.08);

  --color-accent: #1457d9;
  --color-accent-hover: #104cc2;
  --color-accent-active: #0d3e9f;
  --color-accent-subtle: #edf3ff;
  --color-accent-muted: #c7d8ff;
  --color-accent-contrast: #ffffff;
  --color-selection: rgba(20, 87, 217, 0.2);

  --color-success: #138a4b;
  --color-success-text: #0b6837;
  --color-success-surface: #edf9f2;
  --color-success-border: #b8e5ca;
  --color-warning: #b65c00;
  --color-warning-text: #7a3e00;
  --color-warning-surface: #fff7e8;
  --color-warning-border: #f2d49b;
  --color-danger: #d92d20;
  --color-danger-text: #b42318;
  --color-danger-surface: #fff1f0;
  --color-danger-border: #f4c1bd;

  --font-family-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-mono: "SFMono-Regular", "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  --font-size-5xl: 3.5rem;
  --font-size-6xl: 4.5rem;
  --line-height-none: 1;
  --line-height-tight: 1.08;
  --line-height-snug: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;
  --letter-spacing-tighter: -0.045em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;
  --letter-spacing-wider: 0.08em;

  --type-display-size: clamp(3rem, 7vw, 6rem);
  --type-display-line-height: 0.95;
  --type-display-letter-spacing: -0.02em;
  --type-display-weight: 600;
  --type-title-1-size: clamp(2.25rem, 5vw, 4.5rem);
  --type-title-1-line-height: 1.02;
  --type-title-1-letter-spacing: -0.04em;
  --type-title-1-weight: 600;
  --type-title-2-size: clamp(1.75rem, 3vw, 3rem);
  --type-title-2-line-height: 1.08;
  --type-title-2-letter-spacing: -0.03em;
  --type-title-2-weight: 600;
  --type-title-3-size: 1.5rem;
  --type-title-3-line-height: 1.2;
  --type-title-3-letter-spacing: -0.02em;
  --type-title-3-weight: 600;
  --type-body-lg-size: 1.125rem;
  --type-body-lg-line-height: 1.55;
  --type-body-size: 1rem;
  --type-body-line-height: 1.5;
  --type-body-sm-size: 0.875rem;
  --type-body-sm-line-height: 1.45;
  --type-label-size: 0.875rem;
  --type-label-line-height: 1.2;
  --type-label-weight: 500;
  --type-caption-size: 0.75rem;
  --type-caption-line-height: 1.35;
  --type-caption-letter-spacing: 0.02em;

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

  --border-width-hairline: 1px;
  --border-width-strong: 2px;
  --radius-none: 0;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;
  --radius-control: var(--radius-md);
  --radius-card: var(--radius-xl);
  --radius-dialog: var(--radius-2xl);
  --radius-pill: var(--radius-full);

  --shadow-xs: 0 1px 2px rgba(17, 18, 20, 0.05);
  --shadow-sm: 0 1px 2px rgba(17, 18, 20, 0.04), 0 4px 12px rgba(17, 18, 20, 0.06);
  --shadow-md: 0 2px 4px rgba(17, 18, 20, 0.04), 0 12px 28px rgba(17, 18, 20, 0.09);
  --shadow-lg: 0 4px 8px rgba(17, 18, 20, 0.05), 0 24px 56px rgba(17, 18, 20, 0.12);
  --shadow-xl: 0 8px 16px rgba(17, 18, 20, 0.06), 0 36px 80px rgba(17, 18, 20, 0.16);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --shadow-glass-structural: 0 18px 50px rgba(17, 18, 20, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  --shadow-glass-media: 0 14px 32px rgba(7, 17, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.32);
  --blur-glass-structural: 28px;
  --blur-glass-media: 18px;
  --blur-glass-compact: 12px;

  --gradient-atmosphere-cool: linear-gradient(var(--color-scrim-media), var(--color-scrim-media)), radial-gradient(circle at 78% 20%, #68b7ef 0%, transparent 38%), radial-gradient(circle at 14% 5%, #8044d7 0%, transparent 42%), linear-gradient(145deg, #173e91 0%, #2a73c2 50%, #9a55dc 100%);
  --gradient-atmosphere-warm: radial-gradient(circle at 12% 18%, rgba(75, 80, 95, 0.7) 0%, transparent 44%), radial-gradient(circle at 90% 82%, rgba(182, 143, 153, 0.75) 0%, transparent 44%), linear-gradient(135deg, #a9acb5 0%, #d7d0cc 54%, #c9aeb4 100%);

  --focus-ring-color: rgba(20, 87, 217, 0.42);
  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;
  --focus-ring-shadow: 0 0 0 3px rgba(20, 87, 217, 0.24);

  --opacity-disabled: 0.42;
  --opacity-muted: 0.64;
  --opacity-hover: 0.08;
  --opacity-pressed: 0.14;

  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-toast: 600;
  --z-tooltip: 700;

  --duration-instant: 0ms;
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-slower: 500ms;
  --duration-deliberate: 700ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0, 1);
  --ease-exit: cubic-bezier(0.3, 0, 1, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.25, 0.64, 1);

  --container-xs: 320px;
  --container-sm: 480px;
  --container-md: 640px;
  --container-lg: 960px;
  --container-xl: 1200px;
  --container-2xl: 1440px;
  --container-reading: 720px;
  --container-content: 1200px;
  --container-wide: 1440px;
  --container-gutter: clamp(20px, 4vw, 48px);

  --layout-sidebar-width: 264px;
  --layout-topbar-height: 72px;
  --layout-page-gutter: clamp(16px, 2.5vw, 32px);
  --control-height: 44px;

  /* Procurent aliases keep component names isolated from third-party editors. */
  --bs-color-canvas: var(--color-canvas);
  --bs-color-surface: var(--color-surface);
  --bs-color-surface-subtle: var(--color-surface-subtle);
  --bs-color-surface-sunken: var(--color-surface-sunken);
  --bs-color-surface-inverse: var(--color-surface-inverse);
  --bs-color-text: var(--color-text-primary);
  --bs-color-text-secondary: var(--color-text-secondary);
  --bs-color-text-tertiary: var(--color-text-tertiary);
  --bs-color-border: var(--color-border-default);
  --bs-color-border-subtle: var(--color-border-subtle);
  --bs-color-accent: var(--color-accent);
  --bs-color-accent-hover: var(--color-accent-hover);
  --bs-color-accent-active: var(--color-accent-active);
  --bs-color-accent-subtle: var(--color-accent-subtle);
  --bs-radius-control: var(--radius-control);
  --bs-radius-panel: 20px;
  --bs-radius-dialog: var(--radius-dialog);
  --bs-shadow-raised: var(--shadow-md);
  --bs-container-reading: var(--container-reading);
  --bs-container-content: var(--container-content);
  --bs-container-wide: var(--container-wide);
  --bs-container-app: 1920px;
  --bs-container-gutter: var(--container-gutter);
}

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

  --color-canvas: #090a0c;
  --color-surface: #111317;
  --color-surface-subtle: #171a1f;
  --color-surface-raised: #1b1e24;
  --color-surface-sunken: #07080a;
  --color-surface-inverse: #f5f5f7;
  --color-surface-glass-structural: rgba(24, 27, 33, 0.86);
  --color-backdrop: rgba(0, 0, 0, 0.64);

  --color-text-primary: #f5f6f7;
  --color-text-secondary: #b3b7bf;
  --color-text-tertiary: #858a94;
  --color-text-disabled: #5e626b;
  --color-text-inverse: #111214;
  --color-icon-primary: #f0f1f3;
  --color-icon-secondary: #a1a6af;
  --color-icon-disabled: #5e626b;

  --color-border-subtle: #242830;
  --color-border-default: #343943;
  --color-border-strong: #505762;
  --color-border-glass-structural: rgba(255, 255, 255, 0.14);
  --color-divider: rgba(255, 255, 255, 0.1);

  --color-accent: #7aa2ff;
  --color-accent-hover: #91b2ff;
  --color-accent-active: #5f8eff;
  --color-accent-subtle: rgba(74, 124, 255, 0.14);
  --color-accent-muted: rgba(122, 162, 255, 0.28);
  --color-accent-contrast: #071225;
  --color-selection: rgba(122, 162, 255, 0.3);

  --color-success: #4fd18b;
  --color-success-text: #77dfa6;
  --color-success-surface: rgba(30, 166, 91, 0.14);
  --color-success-border: rgba(79, 209, 139, 0.34);
  --color-warning: #ffb454;
  --color-warning-text: #ffc978;
  --color-warning-surface: rgba(255, 160, 35, 0.14);
  --color-warning-border: rgba(255, 180, 84, 0.34);
  --color-danger: #ff746a;
  --color-danger-text: #ff958d;
  --color-danger-surface: rgba(255, 82, 70, 0.14);
  --color-danger-border: rgba(255, 116, 106, 0.34);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24), 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.24), 0 12px 28px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.26), 0 24px 56px rgba(0, 0, 0, 0.46);
  --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.3), 0 36px 80px rgba(0, 0, 0, 0.56);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow-glass-structural: 0 18px 50px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --focus-ring-color: rgba(122, 162, 255, 0.68);
  --focus-ring-shadow: 0 0 0 3px rgba(122, 162, 255, 0.32);
}