:root {
  /* Core Surface Tokens */
  --bg-primary: #ffffff;
  --bg-surface: #f3f4f6;
  --bg-elevated: #ffffff;

  /* Text */
  --text-primary: #111827;
  --text-secondary: #6b7280;

  /* Accent */
  --accent: #2563eb;
  --accent-hover: #1d4ed8;

  /* Borders */
  --border-color: #e5e7eb;

  /* Shadows */
  --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08);

  /* Extended tokens used by existing components */
  --shadow-medium: 0 8px 20px rgba(0, 0, 0, 0.12);
  --shadow-strong: 0 12px 28px rgba(0, 0, 0, 0.16);
  --shadow-elevated: 0 16px 32px rgba(0, 0, 0, 0.2);
  --modal-backdrop: rgba(0, 0, 0, 0.35);
  --overlay-backdrop: rgba(0, 0, 0, 0.5);
  --hover-bg-color: color-mix(in srgb, var(--bg-surface) 90%, var(--bg-elevated) 10%);
  --surface-subtle: color-mix(in srgb, var(--text-primary) 6%, transparent);
  --border-color-light: color-mix(in srgb, var(--border-color) 85%, var(--bg-elevated) 15%);
  --focus-outline-color: #ffbf47;
  --a11y-focus-outline: #ffae00;
  --a11y-min-contrast-text: #000000;
  --a11y-min-contrast-bg: #ffffff;
  --resize-handle-bg: color-mix(in srgb, var(--text-primary) 15%, transparent);

  /* Semantic utility tokens */
  --text-on-accent: #ffffff;
  --bg-inverse: #000000;
  --bg-muted: #f9fafb;
  --bg-soft-blue: #eef2ff;
  --bg-soft-info: #e0f2fe;
  --border-soft: #d0d7de;
  --border-info: #0ea5e9;
  --border-soft-2: #e2e8f0;
  --text-danger: #991b1b;
  --bg-danger-soft: #fee2e2;
  --bg-danger-hover: #fecaca;
  --border-danger: #fca5a5;

  /* Backward-compatible aliases */
  --primary-color: var(--accent);
  --secondary-color: var(--accent-hover);
  --background-color: var(--bg-primary);
  --background-gradient: none;
  --text-color: var(--text-primary);
  --card-background: var(--bg-elevated);
  --widget-header-border-color: var(--border-color);
  --notification-bg: var(--accent);
  --notification-text: var(--text-on-accent);

  --border-radius: 12px;
  --border-radius-small: 12px;
  --border-radius-medium: 12px;
  --border-radius-large: 12px;
  --spacing-xs: 6px;
  --spacing-sm: 10px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --reduce-motion: 0;
}