:root {
  /* ---- Brand & Accent (WCAG AA verified) ---- */
  --primary: #0066CC;
  --primary-hover: #0052A3;
  --primary-active: #003D7A;
  --primary-on: #FFFFFF;
  --secondary: #213183;

  /* ---- Decorative Sticker Palette ---- */
  --accent-sky: #62AEF0;
  --accent-purple: #D6B6F6;
  --accent-purple-deep: #391C57;
  --accent-pink: #FF64C8;
  --accent-orange: #DD5B00;
  --accent-orange-deep: #793400;
  --accent-teal: #2A9D99;
  --accent-green: #1AAE39;
  --accent-brown: #523410;

  /* ---- Surface ---- */
  --canvas: #FAF9F7;
  --surface: #FFFFFF;
  --surface-hover: #F3F2F0;
  --hairline: #E6E4E1;
  --hairline-strong: #D0CDC8;
  --bg-overlay: rgba(0, 0, 0, 0.3);

  /* ---- Text (WCAG AA: >= 4.5:1 on #FAF9F7 / #FFF) ---- */
  --ink: #1A1A2E;
  --ink-secondary: #3D3B4A;
  --ink-muted: #605D6A;
  --ink-faint: #96929E;
  --ink-inverse: #FFFFFF;

  /* ---- Semantic (WCAG AA verified) ---- */
  --success: #1A8A3D;
  --warning: #B84A00;
  --danger: #D32F2F;
  --info: #0066CC;

  /* ---- Mesh gradient blobs ---- */
  --mesh-blob-1: rgba(0, 102, 204, 0.10);
  --mesh-blob-2: rgba(124, 58, 237, 0.08);
  --mesh-blob-3: rgba(236, 72, 153, 0.06);
  --mesh-blob-4: rgba(34, 211, 238, 0.07);

  /* ---- Radius: Pills for ALL interactive elements ---- */
  --radius-pill: 9999px;
  --radius-card: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;

  /* ---- Spacing (8px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---- Typography: Font ---- */
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;

  /* ---- Typography: Fluid Scale ---- */
  --text-display: 700 clamp(36px, 5.5vw, 64px)/1.0 var(--font-sans);
  --text-h1: 700 clamp(28px, 4vw, 40px)/1.1 var(--font-sans);
  --text-h2: 700 clamp(22px, 3vw, 32px)/1.1 var(--font-sans);
  --text-h3: 600 22px/1.3 var(--font-sans);
  --text-h4: 600 18px/1.3 var(--font-sans);
  --text-body: 400 16px/1.6 var(--font-sans);
  --text-body-sm: 400 15px/1.5 var(--font-sans);
  --text-button: 500 15px/1.4 var(--font-sans);
  --text-caption: 400 14px/1.5 var(--font-sans);
  --text-xs: 500 12px/1.3 var(--font-sans);
  --text-eyebrow: 600 11px/1.2 var(--font-sans);

  /* ---- Elevation ---- */
  --shadow-flat: 0 0 0 0 transparent;
  --shadow-soft:
    0 1px 2px rgba(0,0,0,0.04),
    0 2px 4px rgba(0,0,0,0.03);
  --shadow-elevated:
    0 1px 3px rgba(0,0,0,0.04),
    0 4px 12px rgba(0,0,0,0.04),
    0 12px 32px rgba(0,0,0,0.04);

  /* ---- Glass System ---- */
  --glass-1: rgba(255, 255, 255, 0.60);
  --glass-2: rgba(255, 255, 255, 0.78);
  --glass-3: rgba(255, 255, 255, 0.90);
  --glass-border: rgba(0, 0, 0, 0.06);
  --glass-border-strong: rgba(0, 0, 0, 0.12);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.60);

  /* ---- Z-Index ---- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  /* ---- Layout ---- */
  --sidebar-width: 260px;
  --toolbar-height: 48px;
  --canvas-grid-color: #D8D7D4;
  --sticky-bg: #FFFDE7;
  --sticky-border: #F5E6A3;

  /* ---- Focus ---- */
  --focus-ring: 0 0 0 3px rgba(0, 102, 204, 0.35);

  /* ============================================
     Backward-Compatible Aliases (for existing CSS)
     ============================================ */

  /* Radius */
  --radius-full: var(--radius-pill);
  --radius-lg: var(--radius-card);
  --radius-md: var(--radius-sm);
  --radius-xs: var(--radius-xs);

  /* Spacing */
  --space-xxs: 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-xxl: var(--space-8);
  --space-3xl: var(--space-12);
  --space-4xl: var(--space-16);

  /* Typography scale aliases */
  --text-display-1: 64px;
  --text-display-2: 54px;
  --text-heading-1: var(--text-h1);
  --text-heading-2: var(--text-h2);
  --text-heading-3: var(--text-h3);
  --text-title: var(--text-h4);
  --text-body: 16px;
  --text-body-sm: 15px;
  --text-button: 15px;
  --text-caption: 14px;
  --text-eyebrow: 12px;
  --text-xs: 11px;

  /* Typography weight aliases */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line height aliases */
  --leading-display: 1.0;
  --leading-heading: 1.1;
  --leading-body: 1.5;
  --leading-dense: 1.33;
  --leading-tight: 1.2;

  /* Tracking aliases */
  --tracking-display-1: -2.125px;
  --tracking-display-2: -1.875px;
  --tracking-heading-1: -1px;
  --tracking-heading-2: -0.625px;
  --tracking-heading-3: -0.25px;
  --tracking-title: -0.125px;
  --tracking-eyebrow: 0.125px;

  /* Transition aliases */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 350ms ease;

  /* Surface aliases */
  --canvas-soft: var(--canvas);

  /* Shadow aliases */
  --shadow-glass: var(--shadow-elevated);
  --shadow-glass-hover:
    0 1px 3px rgba(0,0,0,0.04),
    0 8px 16px rgba(0,0,0,0.06);

  /* Glow aliases */
  --glow-primary: 0 0 0 1px rgba(0, 102, 204, 0.12), 0 8px 24px rgba(0, 102, 204, 0.18);
  --glow-primary-strong: 0 0 0 1px rgba(0, 102, 204, 0.2), 0 12px 32px rgba(0, 102, 204, 0.28);

  /* Blur aliases */
  --blur-sm: 8px;
  --blur-md: 14px;
  --blur-lg: 22px;
  --blur-xl: 32px;
  --blur-2xl: 48px;

  /* Mesh blob aliases */
  --mesh-blob-1: rgba(0, 102, 204, 0.08);
  --mesh-blob-2: rgba(124, 58, 237, 0.06);
  --mesh-blob-3: rgba(236, 72, 153, 0.05);
  --mesh-blob-4: rgba(34, 211, 238, 0.06);
}

/* ============================================
   Dark Theme
   ============================================ */

[data-theme='dark'] {
  --canvas: #1C1C1E;
  --surface: #2C2C2E;
  --surface-hover: #3A3A3C;
  --hairline: #3A3A3C;
  --hairline-strong: #48484A;
  --bg-overlay: rgba(0, 0, 0, 0.6);

  --ink: #F5F5F7;
  --ink-secondary: #A1A1A6;
  --ink-muted: #7B7B80;
  --ink-faint: #48484A;
  --ink-inverse: #1D1D1F;

  --primary: #0A84FF;
  --primary-hover: #409CFF;
  --primary-active: #5EB0FF;
  --success: #30D158;
  --warning: #FF9F0A;
  --danger: #FF453A;
  --info: #64D2FF;

  --mesh-blob-1: rgba(10, 132, 255, 0.18);
  --mesh-blob-2: rgba(124, 58, 237, 0.16);
  --mesh-blob-3: rgba(236, 72, 153, 0.12);
  --mesh-blob-4: rgba(34, 211, 238, 0.14);

  --glass-1: rgba(28, 28, 30, 0.60);
  --glass-2: rgba(28, 28, 30, 0.78);
  --glass-3: rgba(28, 28, 30, 0.90);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-strong: rgba(255, 255, 255, 0.16);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --shadow-soft:
    0 1px 2px rgba(0,0,0,0.15),
    0 2px 4px rgba(0,0,0,0.12);
  --shadow-elevated:
    0 1px 3px rgba(0,0,0,0.2),
    0 4px 12px rgba(0,0,0,0.2),
    0 12px 32px rgba(0,0,0,0.25);

  --focus-ring: 0 0 0 3px rgba(10, 132, 255, 0.4);

  --canvas-grid-color: #3A3A3C;
  --sticky-bg: #2C2C2E;
  --sticky-border: #3A3A3C;

  /* Dark mesh blob aliases */
  --mesh-blob-1: rgba(10, 132, 255, 0.15);
  --mesh-blob-2: rgba(124, 58, 237, 0.12);
  --mesh-blob-3: rgba(236, 72, 153, 0.10);
  --mesh-blob-4: rgba(34, 211, 238, 0.12);
  --canvas-soft: var(--canvas);
}