:root {
  color-scheme: light;

  /* Typography */
  --ds-font-sans: Arial, Helvetica, sans-serif;
  --ds-font-mono: Consolas, Menlo, Monaco, monospace;
  --ds-font-size-2xs: 0.625rem;
  --ds-font-size-xs: 0.6875rem;
  --ds-font-size-sm: 0.75rem;
  --ds-font-size-md: 0.875rem;
  --ds-font-size-lg: 1rem;
  --ds-font-size-xl: 1.125rem;
  --ds-font-size-2xl: 1.375rem;
  --ds-font-size-3xl: 1.75rem;
  --ds-font-size-kpi: 1.1875rem;
  --ds-line-height-tight: 1.2;
  --ds-line-height-body: 1.45;
  --ds-font-weight-regular: 400;
  --ds-font-weight-medium: 600;
  --ds-font-weight-bold: 700;

  /* Spacing */
  --ds-space-0: 0;
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-10: 2.5rem;
  --ds-space-12: 3rem;

  /* Shape and elevation */
  --ds-border-width: 1px;
  --ds-radius-sm: 0.25rem;
  --ds-radius-md: 0.375rem;
  --ds-radius-lg: 0.5rem;
  --ds-radius-pill: 999px;
  --ds-shadow-sm: 0 1px 2px rgb(23 32 42 / 4%);
  --ds-shadow-md: 0 6px 18px rgb(23 32 42 / 12%);
  --ds-shadow-focus: 0 0 0 3px rgb(47 143 131 / 24%);

  /* Controls and layout */
  --ds-control-height-sm: 1.75rem;
  --ds-control-height-md: 2rem;
  --ds-control-height-lg: 2.5rem;
  --ds-icon-size-sm: 0.875rem;
  --ds-icon-size-md: 1.125rem;
  --ds-icon-size-lg: 1.5rem;
  --ds-card-padding-compact: var(--ds-space-3);
  --ds-card-padding: var(--ds-space-4);
  --ds-page-max-width: 96.25rem;
  --ds-page-gutter: 1.375rem;
  --ds-header-height: 2.875rem;

  /* Motion */
  --ds-duration-fast: 120ms;
  --ds-duration-normal: 200ms;
  --ds-ease-standard: ease;

  /* Brand and interactive */
  --ds-color-primary-50: #eef8f6;
  --ds-color-primary-100: #d5eee9;
  --ds-color-primary-300: #8ac8be;
  --ds-color-primary-500: #2f8f83;
  --ds-color-primary-600: #24786e;
  --ds-color-primary-700: #1f625b;
  --ds-color-primary: var(--ds-color-primary-500);
  --ds-color-primary-hover: var(--ds-color-primary-600);
  --ds-color-primary-active: var(--ds-color-primary-700);
  --ds-color-focus: #168f82;
  --ds-color-on-accent: #ffffff;
  --ds-color-on-accent-muted: rgb(255 255 255 / 20%);
  --ds-color-primary-alpha: rgb(47 143 131 / 28%);
  --ds-color-shadow-soft: rgb(23 32 42 / 5%);
  --ds-color-shadow-medium: rgb(23 32 42 / 18%);
  --ds-color-shadow-strong: rgb(23 32 42 / 28%);
  --ds-color-overlay: rgb(15 23 31 / 48%);
  --ds-color-overlay-strong: rgb(15 23 32 / 55%);

  /* Neutral surfaces and text */
  --ds-color-page: #f5f7f9;
  --ds-color-surface: #ffffff;
  --ds-color-surface-subtle: #f8fafb;
  --ds-color-surface-raised: #ffffff;
  --ds-color-border: #d9e0e5;
  --ds-color-border-strong: #c7d0d8;
  --ds-color-divider: #edf1f4;
  --ds-color-text: #17202a;
  --ds-color-text-strong: #102a43;
  --ds-color-text-secondary: #52606c;
  --ds-color-text-muted: #66727d;
  --ds-color-text-disabled: #8996a1;
  --ds-color-disabled-bg: #eef2f4;

  /* Semantic */
  --ds-color-success: #08743d;
  --ds-color-success-bg: #eef9f2;
  --ds-color-success-border: #b9dfc6;
  --ds-color-danger: #b42318;
  --ds-color-danger-bg: #fff0ef;
  --ds-color-danger-border: #e8bab6;
  --ds-color-warning: #8a5a00;
  --ds-color-warning-bg: #fff7df;
  --ds-color-warning-border: #e4c66b;
  --ds-color-info: #2768ba;
  --ds-color-info-bg: #eaf2ff;
  --ds-color-info-border: #bfd4ef;
  --ds-color-neutral: #52606c;
  --ds-color-neutral-bg: #eef2f6;
  --ds-color-neutral-border: #d6dee6;

  /* Trading semantics */
  --ds-color-bullish: var(--ds-color-success);
  --ds-color-bearish: var(--ds-color-danger);
  --ds-color-profit: var(--ds-color-success);
  --ds-color-loss: var(--ds-color-danger);
  --ds-color-chart-positive: #169b62;
  --ds-color-chart-negative: #c33c32;
  --ds-color-chart-neutral: #687681;
  --ds-color-chart-grid: #dfe6ea;
  --ds-color-chart-tooltip: #1e2933;
  --ds-color-chart-tooltip-text: #f8fafc;

  /* Navigation */
  --ds-color-nav-bg: #1e2933;
  --ds-color-nav-text: #dce9ef;
  --ds-color-nav-text-active: #ffffff;
  --ds-color-nav-border: var(--ds-color-primary);
}

[data-theme="dark"] {
  color-scheme: dark;
  --ds-color-page: #111820;
  --ds-color-surface: #18222c;
  --ds-color-surface-subtle: #141d26;
  --ds-color-surface-raised: #202c37;
  --ds-color-border: #33424f;
  --ds-color-border-strong: #465866;
  --ds-color-divider: #293743;
  --ds-color-text: #e7edf2;
  --ds-color-text-strong: #f4f7f9;
  --ds-color-text-secondary: #bac6cf;
  --ds-color-text-muted: #93a3af;
  --ds-color-text-disabled: #6d7b86;
  --ds-color-disabled-bg: #26323d;
  --ds-color-primary-50: #17332f;
  --ds-color-primary-100: #1b463f;
  --ds-color-primary-300: #4ba99c;
  --ds-color-primary-500: #55b9ad;
  --ds-color-primary-600: #72c9bf;
  --ds-color-primary-700: #96d9d1;
  --ds-color-focus: #76d7ca;
  --ds-color-success: #57c98a;
  --ds-color-success-bg: #173527;
  --ds-color-success-border: #2f6748;
  --ds-color-danger: #ff8178;
  --ds-color-danger-bg: #3d2021;
  --ds-color-danger-border: #70403e;
  --ds-color-warning: #f0c96b;
  --ds-color-warning-bg: #392f19;
  --ds-color-warning-border: #6e5a2b;
  --ds-color-info: #75aef0;
  --ds-color-info-bg: #1c3047;
  --ds-color-info-border: #355b82;
  --ds-color-neutral: #bac6cf;
  --ds-color-neutral-bg: #26323d;
  --ds-color-neutral-border: #465866;
  --ds-color-chart-positive: #55c98d;
  --ds-color-chart-negative: #ff8178;
  --ds-color-chart-neutral: #9aa9b4;
  --ds-color-chart-grid: #33424f;
  --ds-color-chart-tooltip: #eef3f6;
  --ds-color-chart-tooltip-text: #17202a;
  --ds-color-nav-bg: #0d141b;
  --ds-shadow-sm: 0 1px 2px rgb(0 0 0 / 22%);
  --ds-shadow-md: 0 8px 22px rgb(0 0 0 / 34%);
  --ds-shadow-focus: 0 0 0 3px rgb(85 185 173 / 32%);
  --ds-color-primary-alpha: rgb(85 185 173 / 32%);
  --ds-color-shadow-soft: rgb(0 0 0 / 22%);
  --ds-color-shadow-medium: rgb(0 0 0 / 34%);
  --ds-color-shadow-strong: rgb(0 0 0 / 46%);
  --ds-color-overlay: rgb(0 0 0 / 58%);
  --ds-color-overlay-strong: rgb(0 0 0 / 70%);
}