:root {
  --ink-950: #07111f;
  --ink-900: #0b1728;
  --ink-800: #17263a;
  --ink-700: #2c3d52;
  --ink-600: #526176;
  --ink-500: #718096;
  --ink-400: #97a3b4;
  --ice-50: #f8fbff;
  --ice-100: #eef6ff;
  --ice-200: #dbeafe;
  --brand-400: #38bdf8;
  --brand-500: #0ea5e9;
  --brand-600: #0284c7;
  --brand-700: #0369a1;
  --aqua-400: #22d3ee;
  --violet-400: #a78bfa;
  --success-500: #16a34a;
  --warning-500: #d97706;
  --danger-500: #dc2626;
  --canvas: #f4f7fb;
  --canvas-deep: #eaf0f7;
  --panel-solid: #ffffff;
  --panel-glass: rgba(255, 255, 255, 0.72);
  --panel-soft: rgba(248, 251, 255, 0.78);
  --line-soft: rgba(15, 23, 42, 0.08);
  --line-medium: rgba(15, 23, 42, 0.13);
  --shadow-float: 0 24px 70px rgba(20, 39, 65, 0.12), 0 3px 12px rgba(20, 39, 65, 0.06);
  --shadow-card: 0 12px 32px rgba(20, 39, 65, 0.08), 0 1px 2px rgba(20, 39, 65, 0.04);
  --ease-premium: cubic-bezier(.2, .8, .2, 1);
  --header-height: 72px;

  /* Backward-compatible aliases used by the existing product UI. */
  --bg: var(--canvas);
  --surface: var(--panel-solid);
  --surface-raised: var(--panel-glass);
  --surface-glass: var(--panel-glass);
  --text: var(--ink-950);
  --text-secondary: var(--ink-600);
  --text-tertiary: var(--ink-400);
  --border: var(--line-soft);
  --border-focus: rgba(14, 165, 233, .5);
  --primary: var(--brand-500);
  --primary-dark: var(--brand-600);
  --primary-light: var(--ice-100);
  --blue: var(--brand-500);
  --green: var(--success-500);
  --amber: var(--warning-500);
  --red: var(--danger-500);
}