:root {
  /* ─── Colors ─── */
  --color-bg:               #f5f5f7;
  --color-surface:          #ffffff;
  --color-surface-raised:   #fafafa;
  --color-border:           #e4e4e7;
  --color-border-focus:     #a5b4fc;

  --color-text:             #18181b;
  --color-text-secondary:   #71717a;
  --color-text-tertiary:    #a1a1aa;
  --color-text-invert:      #ffffff;

  --color-accent:           #6366f1;
  --color-accent-hover:     #4f46e5;
  --color-accent-subtle:    #eef2ff;
  --color-accent-subtle-border: #c7d2fe;

  --color-success:          #059669;
  --color-success-subtle:   #ecfdf5;
  --color-success-border:   #a7f3d0;

  --color-error:            #dc2626;
  --color-error-subtle:     #fef2f2;
  --color-error-border:     #fecaca;

  --color-warning:          #d97706;
  --color-warning-subtle:   #fffbeb;

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

  /* ─── Radius ─── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* ─── Typography ─── */
  --font-sans: 'DM Sans', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  38px;

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ─── Shadows ─── */
  --shadow-xs:  0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-sm:  0 1px 3px 0 rgb(0 0 0 / 0.07), 0 1px 2px -1px rgb(0 0 0 / 0.07);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.07);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.07), 0 4px 6px -4px rgb(0 0 0 / 0.07);
  --shadow-accent: 0 0 0 3px rgb(99 102 241 / 0.15);

  /* ─── Transitions ─── */
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   300ms;
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.45, 0, 0.55, 1);

  /* ─── Layout ─── */
  --container-max:  1120px;
  --nav-height:     60px;
}