:root {
  color-scheme: light;

  /* Colors (Light Theme) */
  --paper: #f4f6f3;
  --surface: #ffffff;
  --sunken: #e9ede8;
  --rule: #d3dad4;
  --rule-strong: #808c85;
  --ink: #14201b;
  --ink-soft: #36443d;
  --muted: #5b6a62;
  --accent: #3b3fc4;
  --accent-hover: #2f32a3;
  --on-accent: #ffffff;
  --focus: var(--accent);
  --up: #136f44;
  --up-soft: #4f9f76;
  --up-tint: #dff1e6;
  --degraded: #955400;
  --degraded-tint: #fbecd2;
  --down: #c0261b;
  --down-tint: #fbe1dd;
  --on-down: #ffffff;
  --unknown: #7d8983;
  --overlay: rgba(20, 32, 27, 0.4);
  --accent-tint: #ecedfb;
  --focus-halo: rgba(59, 63, 196, 0.22);
  --down-halo: rgba(192, 38, 27, 0.18);
  --control-highlight: rgba(255, 255, 255, 0.14);

  /* Shadows (Light Theme) */
  --shadow-overlay: 0 12px 32px rgba(20, 32, 27, 0.18), 0 2px 6px rgba(20, 32, 27, 0.08);
  --shadow-control: 0 1px 0 rgba(20, 32, 27, 0.04), 0 1px 2px rgba(20, 32, 27, 0.10);
  --shadow-inset: inset 0 1px 2px rgba(20, 32, 27, 0.06);

  /* Series Colors */
  --series-1: var(--accent);
  --series-2: #0f7c8c;
  --series-3: #5b8c1a;
  --series-4: #a35b00;
  --series-5: #b8326b;
  --series-6: #6941c6;
  --series-7: #7a5a2f;
  --series-8: #1f5fa8;
  --series-9: #8c2f1c;

  /* Type Families */
  --font-display: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Type Styles */
  --text-display-lg-size: 32px;
  --text-display-lg-line-height: 36px;
  --text-display-lg-weight: 600;
  --text-display-lg-letter-spacing: -0.01em;

  --text-display-md-size: 22px;
  --text-display-md-line-height: 28px;
  --text-display-md-weight: 600;
  --text-display-md-letter-spacing: 0;

  --text-heading-size: 16px;
  --text-heading-line-height: 24px;
  --text-heading-weight: 600;

  --text-body-size: 16px;
  --text-body-line-height: 24px;
  --text-body-weight: 400;

  --text-body-sm-size: 14px;
  --text-body-sm-line-height: 20px;
  --text-body-sm-weight: 400;

  --text-figure-size: 20px;
  --text-figure-line-height: 24px;
  --text-figure-weight: 500;

  --text-data-size: 13px;
  --text-data-line-height: 20px;
  --text-data-weight: 400;

  --text-label-size: 12px;
  --text-label-line-height: 16px;
  --text-label-weight: 500;
  --text-label-letter-spacing: normal;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Radius */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-control: 6px;
  --radius-md: 8px;
  --radius-full: 999px;

  /* Sizes */
  --control-sm: 30px;
  --control-md: 36px;
  --control-touch: 44px;
  --option: 32px;

  /* Compatibility Aliases to Existing Variables */
  --color-paper: var(--paper);
  --color-paper-raised: var(--surface);
  --color-paper-muted: var(--sunken);
  --color-surface: var(--surface);
  --color-sunken: var(--sunken);
  --color-rule: var(--rule);
  --color-rule-strong: var(--rule-strong);
  --color-ink: var(--ink);
  --color-ink-soft: var(--ink-soft);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-accent-ink: var(--on-accent);
  --focus: var(--accent);
  --color-focus: var(--focus);
  --color-success: var(--up);
  --color-warning: var(--degraded);
  --color-error: var(--down);
  --color-danger: var(--down);
  --color-graphite: var(--ink);
  --color-graphite-ink: var(--paper);
  --color-overlay: var(--overlay);

  --region-series-1: var(--series-1);
  --region-series-2: var(--series-2);
  --region-series-3: var(--series-3);
  --region-series-4: var(--series-4);
  --region-series-5: var(--series-5);
  --region-series-6: var(--series-6);
  --region-series-7: var(--series-7);
  --region-series-8: var(--series-8);
  --region-series-9: var(--series-9);

  --radius-surface: var(--radius-md);

  --space-3xs: 2px;
  --space-2xs: var(--space-1);
  --space-xs: var(--space-2);
  --space-sm: var(--space-3);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-8);
  --space-2xl: var(--space-12);

  --text-xs: var(--text-label-size);
  --text-sm: var(--text-body-sm-size);
  --text-base: var(--text-body-size);
  --text-md: var(--text-heading-size);
  --text-lg: var(--text-display-md-size);
  --text-xl: var(--text-display-lg-size);
  --font-sans: var(--font-body);

  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --z-base: 1;
  --z-raised: 10;
  --z-modal: 400;
}

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

  /* Colors (Dark Theme) */
  --paper: #0f1513;
  --surface: #161e1b;
  --sunken: #0b100e;
  --rule: #27322d;
  --rule-strong: #6a7871;
  --ink: #e7ede9;
  --ink-soft: #c3cec8;
  --muted: #93a29a;
  --accent: #a3a6ff;
  --accent-hover: #c0c2ff;
  --on-accent: #14164a;
  --focus: var(--accent);
  --up: #4cc98a;
  --up-soft: #2f8a5f;
  --up-tint: #12301f;
  --degraded: #e5a440;
  --degraded-tint: #3a2a10;
  --down: #ff7a6b;
  --down-tint: #3d1714;
  --on-down: #2a0805;
  --unknown: #6b7972;
  --overlay: rgba(0, 0, 0, 0.6);
  --accent-tint: #23254d;
  --focus-halo: rgba(163, 166, 255, 0.28);
  --down-halo: rgba(255, 122, 107, 0.25);
  --control-highlight: rgba(255, 255, 255, 0.10);

  /* Shadows (Dark Theme) */
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-control: 0 1px 0 rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.40);

  --series-1: var(--accent);
  --series-2: #4fc3d1;
  --series-3: #9bd25a;
  --series-4: #f0b357;
  --series-5: #f07fae;
  --series-6: #c3a6ff;
  --series-7: #d4ac77;
  --series-8: #7fb2f0;
  --series-9: #ff9a80;
}