:root {
  color-scheme: dark;

  --font-ui: "Manrope", "Inter", "Segoe UI", sans-serif;
  --font-display: "Sora", "Manrope", "Inter", "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", "Consolas", "Liberation Mono", monospace;

  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 88px;

  --header-height: 64px;
  --sidebar-width-expanded: 248px;
  --sidebar-width-collapsed: 82px;
  --content-width-standard: 1180px;
  --content-width-wide: 1360px;
  --content-width-editorial: 1440px;
  --content-width-ops: 1520px;

  --transition-fast: 140ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-normal: 220ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 320ms cubic-bezier(0.22, 1, 0.36, 1);

  --accent-300: #9fc4ff;
  --accent-400: #6895ff;
  --accent-500: #3d6df2;
  --accent-600: #2553c9;
  --accent-primary: var(--accent-500);
  --accent-primary-rgb: 61, 109, 242;
  --accent-blue: var(--accent-500);
  --accent-blue-rgb: 61, 109, 242;
  --accent-cyan: #4dbfd8;
  --accent-cyan-rgb: 77, 191, 216;
  --accent-green: #1fa971;
  --accent-green-rgb: 31, 169, 113;
  --accent-amber: #c68d32;
  --accent-amber-rgb: 198, 141, 50;
  --accent-red: #db625c;
  --accent-red-rgb: 219, 98, 92;

  --ambient-cool-rgb: 92, 126, 255;
  --ambient-warm-rgb: 232, 181, 106;
  --ambient-mint-rgb: 94, 205, 184;

  --accent-wash: rgba(var(--accent-primary-rgb), 0.12);
  --accent-gradient: linear-gradient(
    135deg,
    rgba(var(--ambient-cool-rgb), 0.96) 0%,
    rgba(var(--ambient-mint-rgb), 0.82) 100%
  );

  --success-green: var(--accent-green);
  --warning-amber: var(--accent-amber);
  --danger: var(--accent-red);

  --bg-0: #0f1114;
  --bg-1: #16191f;
  --bg-2: #1d222a;
  --bg-3: #262c36;
  --bg-primary: var(--bg-0);
  --bg-secondary: var(--bg-1);
  --bg-elevated: var(--bg-2);
  --bg-surface: rgba(255, 255, 255, 0.02);
  --panel-bg: var(--bg-primary);

  --surface-0: rgba(24, 27, 33, 0.92);
  --surface-1: rgba(29, 34, 42, 0.96);
  --surface-2: rgba(38, 44, 54, 0.98);
  --surface-3: rgba(45, 52, 64, 0.98);
  --surface-primary: var(--surface-0);
  --surface-secondary: var(--surface-1);
  --surface-elevated: var(--surface-2);
  --surface-strong: var(--surface-3);
  --card-bg: var(--surface-primary);

  --stroke-1: rgba(255, 255, 255, 0.08);
  --stroke-2: rgba(255, 255, 255, 0.14);
  --stroke-3: rgba(255, 255, 255, 0.22);
  --border-subtle: var(--stroke-1);
  --border-default: var(--stroke-1);
  --border-strong: var(--stroke-2);
  --card-border: var(--border-default);

  --text-1: rgba(248, 244, 238, 0.96);
  --text-2: rgba(229, 224, 216, 0.74);
  --text-3: rgba(181, 178, 173, 0.58);
  --text-primary: var(--text-1);
  --text-secondary: var(--text-2);
  --text-muted: var(--text-3);
  --icon: rgba(247, 244, 239, 0.86);
  --icon-muted: rgba(205, 199, 191, 0.58);
  --icon-active: var(--accent-primary);

  --shadow-subtle: 0 12px 34px rgba(0, 0, 0, 0.24);
  --shadow-elevated: 0 22px 56px rgba(0, 0, 0, 0.34);
  --shadow-floating: 0 26px 72px rgba(0, 0, 0, 0.42);
  --card-shadow: var(--shadow-subtle);

  --hero-ornament:
    radial-gradient(44rem 28rem at 8% -6%, rgba(var(--ambient-warm-rgb), 0.12), transparent 62%),
    radial-gradient(40rem 30rem at 92% 0%, rgba(var(--ambient-cool-rgb), 0.16), transparent 60%),
    radial-gradient(34rem 24rem at 60% 16%, rgba(var(--ambient-mint-rgb), 0.09), transparent 58%);
  --app-background:
    var(--hero-ornament),
    linear-gradient(180deg, #0d0f13 0%, #101318 45%, #12161b 100%);
}

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

  --bg-0: #f5f2ec;
  --bg-1: #faf7f2;
  --bg-2: #ffffff;
  --bg-3: #f2eee7;
  --bg-primary: var(--bg-0);
  --bg-secondary: var(--bg-1);
  --bg-elevated: var(--bg-2);
  --bg-surface: rgba(255, 255, 255, 0.84);
  --panel-bg: var(--bg-primary);

  --surface-0: rgba(255, 255, 255, 0.82);
  --surface-1: rgba(255, 255, 255, 0.92);
  --surface-2: rgba(255, 255, 255, 0.98);
  --surface-3: #ffffff;
  --surface-primary: var(--surface-0);
  --surface-secondary: var(--surface-1);
  --surface-elevated: var(--surface-2);
  --surface-strong: var(--surface-3);
  --card-bg: var(--surface-primary);

  --stroke-1: rgba(27, 33, 43, 0.08);
  --stroke-2: rgba(27, 33, 43, 0.14);
  --stroke-3: rgba(27, 33, 43, 0.2);
  --border-subtle: var(--stroke-1);
  --border-default: var(--stroke-1);
  --border-strong: var(--stroke-2);
  --card-border: var(--border-default);

  --text-1: rgba(25, 29, 36, 0.94);
  --text-2: rgba(63, 70, 82, 0.72);
  --text-3: rgba(102, 108, 118, 0.58);
  --text-primary: var(--text-1);
  --text-secondary: var(--text-2);
  --text-muted: var(--text-3);
  --icon: rgba(34, 38, 46, 0.82);
  --icon-muted: rgba(93, 100, 110, 0.62);
  --icon-active: var(--accent-primary);

  --shadow-subtle: 0 14px 32px rgba(53, 60, 74, 0.08);
  --shadow-elevated: 0 22px 54px rgba(53, 60, 74, 0.12);
  --shadow-floating: 0 28px 80px rgba(53, 60, 74, 0.16);
  --card-shadow: var(--shadow-subtle);

  --hero-ornament:
    radial-gradient(48rem 30rem at 6% -4%, rgba(var(--ambient-warm-rgb), 0.16), transparent 62%),
    radial-gradient(42rem 30rem at 94% 0%, rgba(var(--ambient-cool-rgb), 0.12), transparent 58%),
    radial-gradient(36rem 26rem at 58% 18%, rgba(var(--ambient-mint-rgb), 0.08), transparent 56%);
  --app-background:
    var(--hero-ornament),
    linear-gradient(180deg, #fffefb 0%, #f8f4ee 54%, #f3efe8 100%);
}

:root,
:root[data-theme="dark"] {
  --bg-primary-rgb: 15, 17, 20;
  --surface-rgb: 29, 34, 42;
}

:root[data-theme="light"] {
  --bg-primary-rgb: 245, 242, 236;
  --surface-rgb: 255, 255, 255;
}

html,
body {
  min-height: 100%;
}

html {
  scroll-behavior: smooth;
}

body.app-layout-root,
body.marketing-shell {
  background: var(--app-background);
  color: var(--text-primary);
  font-family: var(--font-ui);
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.ui-page-header-title {
  font-family: var(--font-display);
  letter-spacing: -0.04em;
  line-height: 1.02;
}

code,
pre,
kbd,
samp {
  font-family: var(--font-mono);
}