:root {
  --ui-primitive-white: #ffffff;
  --ui-primitive-black: #000000;

  /* Fixed readable-ink for author-colored content (ContentColor and
     RichContentTone pair it with white). Deliberately theme-independent;
     mirrors the rgb(17, 24, 39) literal in static/js/content_color.js and
     cabinet/tinymce-content-tone.js. */
  --ui-primitive-content-ink: #111827;

  /* Pure-gray ramp for the dim ("dark") theme surfaces and header accents. */
  --ui-primitive-gray-100: #f4f4f4;
  --ui-primitive-gray-150: #eeeeee;
  --ui-primitive-gray-200: #e0e0e0;
  --ui-primitive-gray-250: #dedede;
  --ui-primitive-gray-300: #cfcfcf;
  --ui-primitive-gray-400: #bdbdbd;
  --ui-primitive-gray-800: #424245;

  /* Night ramp for the midnight (true dark) theme: neutral graphite surfaces
     (a whisper of cool tint, perceptually gray — not navy) plus
     light text steps. 950 is the deepest chrome, 600 the strongest border. */
  --ui-primitive-night-950: #0a0a0c;
  --ui-primitive-night-900: #17171a;
  --ui-primitive-night-850: #1f1f23;
  --ui-primitive-night-800: #27272c;
  --ui-primitive-night-700: #333339;
  --ui-primitive-night-600: #45454d;
  --ui-primitive-night-300: #a2a2ab;
  --ui-primitive-night-200: #c7c7ce;
  --ui-primitive-night-100: #e0e0e5;
  --ui-primitive-night-50: #f2f2f5;

  /* SitePattern wallpaper stops (owner: css/ui/components/site_pattern.css).
     Every pattern uses this single branded palette; theme packs choose the
     regular or luminous night variant while pattern packs only swap artwork. */
  --ui-primitive-pattern-glow-teal: #0fa886;
  --ui-primitive-pattern-glow-blue: #2f7fc4;
  --ui-primitive-pattern-glow-violet: #7d56c2;
  --ui-primitive-pattern-glow-rose: #cf4f7e;
  --ui-primitive-pattern-glow-teal-bright: #1fd0a0;
  --ui-primitive-pattern-glow-blue-bright: #2e9fe6;
  --ui-primitive-pattern-glow-violet-bright: #8a63e8;
  --ui-primitive-pattern-glow-rose-bright: #e2557f;

  --ui-primitive-neutral-50: #f8fafc;
  --ui-primitive-neutral-100: #f1f5f9;
  --ui-primitive-neutral-200: #e2e8f0;
  --ui-primitive-neutral-300: #cbd5e1;
  --ui-primitive-neutral-400: #94a3b8;
  --ui-primitive-neutral-500: #64748b;
  --ui-primitive-neutral-600: #475569;
  --ui-primitive-neutral-700: #334155;
  --ui-primitive-neutral-800: #1e293b;
  --ui-primitive-neutral-900: #0f172a;

  --ui-primitive-brand-50: #eff6ff;
  --ui-primitive-brand-100: #dbeafe;
  /* 200/300 are the dark-canvas accent steps (link text on night surfaces). */
  --ui-primitive-brand-200: #a3ccff;
  --ui-primitive-brand-300: #66adff;
  --ui-primitive-brand-500: #0071e3;
  --ui-primitive-brand-600: #005bb5;
  --ui-primitive-brand-700: #004494;

  /* Button-only aurora accent, sampled from the wallpaper's blue -> violet
     range. Links/tabs keep the brand ramp; controls avoid the green-teal cast. */
  --ui-primitive-control-aurora-50: #f2f4ff;
  --ui-primitive-control-aurora-100: #e3e7ff;
  --ui-primitive-control-aurora-200: #c8d0ff;
  --ui-primitive-control-aurora-300: #9faaf3;
  --ui-primitive-control-aurora-500: #6774d8;
  --ui-primitive-control-aurora-600: #5561c4;
  --ui-primitive-control-aurora-700: #424aa3;

  --ui-primitive-success-50: #ecfdf5;
  /* 400/500 steps are readable accents on night surfaces (midnight theme). */
  --ui-primitive-success-400: #34d399;
  --ui-primitive-success-500: #10b981;
  --ui-primitive-success-600: #059669;
  --ui-primitive-warning-50: #fffbeb;
  --ui-primitive-warning-400: #fbbf24;
  --ui-primitive-warning-500: #f59e0b;
  --ui-primitive-warning-600: #d97706;
  --ui-primitive-danger-50: #fef2f2;
  --ui-primitive-danger-400: #f87171;
  --ui-primitive-danger-500: #ef4444;
  --ui-primitive-danger-600: #dc2626;

  --ui-primitive-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.1);
  --ui-primitive-shadow-md: 0 10px 28px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.08);
  --ui-primitive-focus-ring: 0 0 0 3px rgba(0, 113, 227, 0.32);

  --ui-space-0: 0;
  --ui-space-1: 0.25rem;
  --ui-space-2: 0.5rem;
  --ui-space-3: 0.75rem;
  --ui-space-4: 1rem;
  --ui-space-5: 1.25rem;
  --ui-space-6: 1.5rem;
  --ui-space-8: 2rem;

  --ui-radius-xs: 0.125rem;
  --ui-radius-sm: 0.1875rem;
  --ui-radius-md: 0.3125rem;
  --ui-radius-lg: 0.4375rem;
  --ui-radius-xl: 0.5rem;
  --ui-radius-pill: 999px;

  --ui-motion-duration-fast: 160ms;
  --ui-motion-duration-normal: 220ms;
  --ui-motion-duration-slow: 300ms;
  --ui-motion-easing-standard: cubic-bezier(0.25, 0.8, 0.25, 1);
  --ui-motion-easing-emphasized: cubic-bezier(0.16, 1, 0.3, 1);

  --ui-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ui-motion-duration-fast: 1ms;
    --ui-motion-duration-normal: 1ms;
    --ui-motion-duration-slow: 1ms;
  }
}