:root {
  --fx-radius-xl: 28px;
  --fx-radius-lg: 20px;
  --fx-radius-md: 14px;
  --fx-radius-sm: 10px;
  --fx-space-2: 8px;
  --fx-space-3: 12px;
  --fx-space-4: 16px;
  --fx-space-6: 24px;
  --fx-space-8: 32px;
  --fx-shell-max: 1280px;
  --fx-font-ui: 'Manrope', system-ui, sans-serif;
  --fx-font-display: 'Montserrat', 'Manrope', system-ui, sans-serif;
  --fx-font-mono: 'JetBrains Mono', monospace;

  --bg-canvas: #eef3f8;
  --bg-elevated: #f8fbff;
  --bg-operational: #dce7f2;
  --panel-technical: #c6d3e6;
  --text-primary: #101f36;
  --text-secondary: #50637f;
  --border-soft: #d6deea;
  --accent-primary: #2962d9;
  --accent-secondary: #16a34a;
  --accent-soft: #cde0ff;
  --contrast-ink: #0d1728;
  --success: #159a58;
  --warning: #c27a12;
  --danger: #c74646;
  --info: #1c89c9;
  --chart-series-1: #2962d9;
  --chart-series-2: #16a34a;
  --chart-series-3: #1c89c9;
  --print-paper-bg: #ffffff;
  --print-paper-text: #1b2430;

  --fx-bg: var(--bg-canvas);
  --fx-surface: var(--bg-elevated);
  --fx-surface-strong: var(--bg-operational);
  --fx-panel: var(--panel-technical);
  --fx-border: var(--border-soft);
  --fx-border-strong: #b6c4d8;
  --fx-text: var(--text-primary);
  --fx-text-muted: var(--text-secondary);
  --fx-accent: var(--accent-primary);
  --fx-accent-strong: var(--accent-secondary);
  --fx-success: var(--success);
  --fx-warning: var(--warning);
  --fx-danger: var(--danger);
  --fx-shadow-lg: 0 24px 80px rgba(16, 31, 54, 0.12);
}

html {
  color-scheme: light;
  background: var(--bg-canvas);
}

html[data-theme='dark'] {
  color-scheme: dark;
  --bg-canvas: #0e1f26;
  --bg-elevated: #122933;
  --bg-operational: #163442;
  --panel-technical: #1b3c49;
  --text-primary: #eaf8fb;
  --text-secondary: #8ab6c3;
  --border-soft: #244654;
  --accent-primary: #1e8bff;
  --accent-secondary: #1ec98f;
  --accent-soft: #113957;
  --contrast-ink: #081319;
  --success: #23c27e;
  --warning: #e5a93c;
  --danger: #ff6b6b;
  --info: #4ab4ff;
  --chart-series-1: #4ab4ff;
  --chart-series-2: #1ec98f;
  --chart-series-3: #8ab6c3;
  --fx-border-strong: #346171;
  --fx-shadow-lg: 0 24px 80px rgba(5, 14, 18, 0.32);
}

body {
  margin: 0;
  font-family: var(--fx-font-ui);
  color: var(--text-primary);
  background:
    radial-gradient(circle at top left, rgba(41, 98, 217, 0.12), transparent 30%),
    radial-gradient(circle at bottom right, rgba(22, 163, 74, 0.1), transparent 24%),
    linear-gradient(180deg, var(--bg-canvas) 0%, color-mix(in srgb, var(--bg-canvas) 84%, var(--accent-soft) 16%) 100%);
}

body[data-brand-surface='workspace'] {
  background:
    radial-gradient(circle at top right, rgba(41, 98, 217, 0.14), transparent 24%),
    linear-gradient(180deg, var(--bg-operational) 0%, color-mix(in srgb, var(--bg-operational) 88%, var(--accent-soft) 12%) 100%);
}

html[data-theme='dark'] body {
  background:
    radial-gradient(circle at top left, rgba(30, 139, 255, 0.16), transparent 28%),
    radial-gradient(circle at bottom right, rgba(30, 201, 143, 0.1), transparent 22%),
    linear-gradient(180deg, var(--bg-canvas) 0%, #0b181e 100%);
}

html[data-theme='dark'] body[data-brand-surface='workspace'] {
  background:
    radial-gradient(circle at top right, rgba(30, 139, 255, 0.14), transparent 22%),
    linear-gradient(180deg, var(--bg-operational) 0%, #10242d 100%);
}