:root {
  /*
   * EasyPURL Design Tokens
   *
   * Tier 1: Primitives are the raw values observed in current site CSS.
   * Tier 2: Semantic tokens are the preferred names for product/page authors.
   * Tier 3: Component tokens define shared UI defaults.
   * Tier 4: Compatibility aliases preserve current token names during migration.
   */

  /* Tier 1: Brand Primitives */
  --ep-purple-900: #211f57;
  --ep-purple-800: #23235e;
  --ep-purple-700: #2a296c;
  --ep-purple-650: #2a2b6a;
  --ep-purple-600: #30246d;
  --ep-purple-500: #3f408a;
  --ep-blue-800: #075f93;
  --ep-blue-700: #0a4e78;
  --ep-blue-600: #1e8fc0;
  --ep-blue-500: #25aae1;
  --ep-blue-450: #22abce;
  --ep-blue-400: #78c2e5;
  --ep-indigo-500: #5062c7;
  --ep-indigo-100: #bfc7ff;
  --ep-cyan-700: #006c70;
  --ep-cyan-500: #22afb0;
  --ep-cyan-400: #41d3d5;

  /* Tier 1: Neutral Primitives */
  --ep-white: #ffffff;
  --ep-black: #000000;
  --ep-slate-950: #0f172a;
  --ep-slate-900: #20263d;
  --ep-slate-800: #333333;
  --ep-slate-700: #404040;
  --ep-slate-650: #4b5563;
  --ep-slate-600: #535353;
  --ep-slate-575: #555555;
  --ep-slate-550: #5d6678;
  --ep-slate-500: #6c757d;
  --ep-gray-600: #747474;
  --ep-gray-500: #808080;
  --ep-gray-400: #b3b3b3;
  --ep-gray-300: #d9d9d9;
  --ep-gray-250: #dfe6ef;
  --ep-gray-225: #e0e0e0;
  --ep-gray-200: #e2e8f0;
  --ep-gray-175: #e3e3e3;
  --ep-gray-150: #e5e5e5;
  --ep-gray-125: #ebebeb;
  --ep-gray-100: #f1f5f9;
  --ep-gray-075: #f5f5f5;
  --ep-gray-060: #f6f6f6;
  --ep-gray-050: #f7f7f7;
  --ep-gray-025: #f8f9fa;
  --ep-blue-050: #eff6ff;
  --ep-blue-025: #eef9fd;

  /* Tier 1: Feedback And Accent Primitives */
  --ep-green-700: #198754;
  --ep-green-600: #599133;
  --ep-green-500: #69ad4c;
  --ep-red-700: #dc3545;
  --ep-orange-700: #d33c14;
  --ep-orange-600: #e75832;
  --ep-gold-600: #d69242;
  --ep-gold-500: #dca25e;
  --ep-yellow-500: #ffc107;
  --ep-cyan-info: #0dcaf0;
  --ep-particle-panel-bg: #000022;
  --ep-particle-stat-text: #13e8e9;

  /* Tier 1: Type Primitives */
  --ep-font-sans: "Open Sans", Arial, Helvetica, sans-serif;
  --ep-font-system: "Open Sans", "Segoe UI", Arial, sans-serif;
  --ep-font-display: "MyriadProRegular", "Open Sans", Arial, sans-serif;
  --ep-font-heading: "PT Sans", "Open Sans", Arial, sans-serif;
  --ep-font-script: "Pacifico", cursive;
  --ep-font-serif: Georgia, "Times New Roman", serif;
  --ep-font-size-xs: 11px;
  --ep-font-size-sm: 12px;
  --ep-font-size-button: 13px;
  --ep-font-size-base: 15px;
  --ep-font-size-md: 16px;
  --ep-font-size-lg: 17px;
  --ep-font-size-xl: 20px;
  --ep-font-size-2xl: 24px;
  --ep-font-size-3xl: 32px;
  --ep-font-size-4xl: 40px;
  --ep-line-height-tight: 1.16;
  --ep-line-height-normal: 1.5;
  --ep-line-height-relaxed: 1.65;
  --ep-line-height-loose: 1.7;

  /* Tier 1: Space, Layout, Radius, Shadow Primitives */
  --ep-space-0: 0;
  --ep-space-1: 4px;
  --ep-space-2: 8px;
  --ep-space-3: 12px;
  --ep-space-4: 16px;
  --ep-space-5: 20px;
  --ep-space-6: 24px;
  --ep-space-7: 28px;
  --ep-space-8: 32px;
  --ep-space-10: 40px;
  --ep-space-12: 48px;
  --ep-space-14: 56px;
  --ep-space-16: 64px;
  --ep-space-18: 72px;
  --ep-space-20: 80px;
  --ep-space-24: 96px;
  --ep-container-sm: 760px;
  --ep-container-md: 960px;
  --ep-container-lg: 1120px;
  --ep-container-xl: 1240px;
  --ep-content-narrow: 680px;
  --ep-content-readable: 800px;
  --ep-radius-xs: 3px;
  --ep-radius-sm: 4px;
  --ep-radius-md: 6px;
  --ep-radius-lg: 8px;
  --ep-radius-xl: 14px;
  --ep-radius-pill: 999px;
  --ep-radius-bootstrap: 0.375rem;
  --ep-shadow-soft: 0 8px 24px rgba(32, 38, 61, 0.12);
  --ep-shadow-button: 0 10px 22px rgba(42, 41, 108, 0.18);
  --ep-shadow-button-blue: 0 12px 24px rgba(37, 170, 225, 0.22);
  --ep-shadow-nav-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --ep-shadow-nav-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.08);
  --ep-shadow-nav-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.08);
  --ep-shadow-nav-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
  --ep-shadow-nav-mega: 0 24px 50px -12px rgba(15, 23, 42, 0.12);

  /* Tier 2: Canonical Brand Tokens */
  --ep-brand-primary: var(--ep-purple-700);
  --ep-brand-primary-dark: var(--ep-purple-900);
  --ep-brand-primary-alt: var(--ep-purple-600);
  --ep-brand-accent: var(--ep-blue-500);
  --ep-brand-accent-dark: var(--ep-blue-600);
  --ep-brand-link: var(--ep-blue-800);
  --ep-brand-teal: var(--ep-cyan-700);

  /* Tier 2: Semantic Tokens */
  --ep-color-text: var(--ep-slate-900);
  --ep-color-text-strong: var(--ep-slate-950);
  --ep-color-text-muted: var(--ep-slate-550);
  --ep-color-text-secondary: var(--ep-slate-600);
  --ep-color-text-subtle: var(--ep-gray-500);
  --ep-color-text-inverse: var(--ep-white);
  --ep-color-surface: var(--ep-white);
  --ep-color-surface-soft: var(--ep-gray-060);
  --ep-color-surface-subtle: var(--ep-gray-025);
  --ep-color-surface-brand-soft: var(--ep-blue-025);
  --ep-color-border: var(--ep-gray-225);
  --ep-color-border-subtle: var(--ep-gray-250);
  --ep-color-border-muted: var(--ep-gray-200);
  --ep-color-success: var(--ep-green-700);
  --ep-color-success-muted: var(--ep-green-600);
  --ep-color-error: var(--ep-red-700);
  --ep-color-warning: var(--ep-yellow-500);
  --ep-color-info: var(--ep-cyan-info);
  --ep-color-cta-secondary: var(--ep-green-500);
  --ep-focus-ring: 0 0 0 3px rgba(37, 170, 225, 0.22);

  /* Tier 2: Typography And Rhythm Tokens */
  --ep-type-body-family: var(--ep-font-sans);
  --ep-type-heading-family: var(--ep-font-sans);
  --ep-type-display-family: var(--ep-font-display);
  --ep-type-body-size: var(--ep-font-size-base);
  --ep-type-body-line-height: var(--ep-line-height-normal);
  --ep-type-heading-line-height: var(--ep-line-height-tight);
  --ep-section-padding-sm: var(--ep-space-14);
  --ep-section-padding-md: var(--ep-space-18);
  --ep-section-padding-lg: 92px;

  /* Tier 3: Component Tokens */
  --ep-button-height: 42px;
  --ep-button-padding-x: 22px;
  --ep-button-radius: var(--ep-radius-md);
  --ep-button-bg: var(--ep-brand-primary);
  --ep-button-bg-hover: var(--ep-brand-accent);
  --ep-button-text: var(--ep-color-text-inverse);
  --ep-button-border: transparent;
  --ep-button-shadow: var(--ep-shadow-button);
  --ep-button-outline-bg: transparent;
  --ep-button-outline-text: var(--ep-brand-primary);
  --ep-button-outline-border: var(--ep-brand-accent);
  --ep-card-bg: var(--ep-color-surface);
  --ep-card-border: var(--ep-color-border-subtle);
  --ep-card-radius: var(--ep-radius-md);
  --ep-card-shadow: var(--ep-shadow-soft);
  --ep-form-field-bg: var(--ep-color-surface);
  --ep-form-field-border: var(--ep-color-border);
  --ep-form-field-radius: var(--ep-radius-md);
  --ep-form-field-focus-border: var(--ep-brand-accent);
  --ep-form-field-focus-shadow: var(--ep-focus-ring);
  --ep-nav-bg: var(--ep-color-surface);
  --ep-nav-text: var(--ep-color-text);
  --ep-nav-link-hover: var(--ep-brand-accent);
  --ep-nav-shadow: var(--ep-shadow-nav-md);
  --ep-footer-bg: var(--ep-slate-700);
  --ep-footer-text: var(--ep-gray-200);
  --ep-transition-fast: 0.18s ease;
  --ep-transition-nav: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

  /* Tier 4: Compatibility Aliases */
  --ep-brand-purple: var(--ep-brand-primary);
  --ep-brand-purple-dark: var(--ep-brand-primary-dark);
  --ep-brand-blue: var(--ep-brand-accent);
  --ep-brand-blue-dark: var(--ep-brand-accent-dark);
  --ep-brand-ink: var(--ep-color-text);
  --ep-brand-muted: var(--ep-color-text-muted);
  --ep-brand-line: var(--ep-color-border-subtle);
  --ep-brand-surface: var(--ep-color-surface);
  --ep-brand-soft-blue: var(--ep-color-surface-brand-soft);
  --ep-color-purple-900: var(--ep-purple-900);
  --ep-color-purple-800: var(--ep-purple-800);
  --ep-color-purple-700: var(--ep-purple-700);
  --ep-color-purple-650: var(--ep-purple-650);
  --ep-color-purple-600: var(--ep-purple-600);
  --ep-color-purple-500: var(--ep-purple-500);
  --ep-color-indigo-500: var(--ep-indigo-500);
  --ep-color-indigo-100: var(--ep-indigo-100);
  --ep-color-blue-800: var(--ep-blue-800);
  --ep-color-blue-700: var(--ep-blue-700);
  --ep-color-blue-600: var(--ep-blue-600);
  --ep-color-blue-500: var(--ep-blue-500);
  --ep-color-blue-450: var(--ep-blue-450);
  --ep-color-blue-400: var(--ep-blue-400);
  --ep-color-cyan-700: var(--ep-cyan-700);
  --ep-color-cyan-500: var(--ep-cyan-500);
  --ep-color-cyan-400: var(--ep-cyan-400);
  --ep-color-white: var(--ep-white);
  --ep-color-black: var(--ep-black);
  --ep-color-slate-950: var(--ep-slate-950);
  --ep-color-slate-900: var(--ep-slate-900);
  --ep-color-slate-800: var(--ep-slate-800);
  --ep-color-slate-700: var(--ep-slate-700);
  --ep-color-slate-650: var(--ep-slate-650);
  --ep-color-slate-600: var(--ep-slate-600);
  --ep-color-slate-575: var(--ep-slate-575);
  --ep-color-slate-550: var(--ep-slate-550);
  --ep-color-slate-500: var(--ep-slate-500);
  --ep-color-gray-600: var(--ep-gray-600);
  --ep-color-gray-500: var(--ep-gray-500);
  --ep-color-gray-400: var(--ep-gray-400);
  --ep-color-gray-300: var(--ep-gray-300);
  --ep-color-gray-250: var(--ep-gray-250);
  --ep-color-gray-225: var(--ep-gray-225);
  --ep-color-gray-200: var(--ep-gray-200);
  --ep-color-gray-175: var(--ep-gray-175);
  --ep-color-gray-150: var(--ep-gray-150);
  --ep-color-gray-125: var(--ep-gray-125);
  --ep-color-gray-100: var(--ep-gray-100);
  --ep-color-gray-075: var(--ep-gray-075);
  --ep-color-gray-060: var(--ep-gray-060);
  --ep-color-gray-050: var(--ep-gray-050);
  --ep-color-gray-025: var(--ep-gray-025);
  --ep-color-blue-025: var(--ep-blue-025);
  --ep-color-blue-050: var(--ep-blue-050);
  --ep-color-green-cta: var(--ep-green-500);
  --ep-color-danger: var(--ep-color-error);
  --ep-color-orange: var(--ep-gold-600);
  --ep-color-orange-light: var(--ep-gold-500);
  --ep-color-red-orange: var(--ep-orange-700);
  --ep-color-coral: var(--ep-orange-600);
  --ep-text-strong: var(--ep-color-text-strong);
  --ep-text-body: var(--ep-color-text);
  --ep-text-muted: var(--ep-color-text-muted);
  --ep-text-secondary: var(--ep-color-text-secondary);
  --ep-text-subtle: var(--ep-color-text-subtle);
  --ep-text-inverse: var(--ep-color-text-inverse);
  --ep-surface-white: var(--ep-color-surface);
  --ep-surface-soft: var(--ep-color-surface-soft);
  --ep-surface-subtle: var(--ep-color-surface-subtle);
  --ep-surface-blue-soft: var(--ep-color-surface-brand-soft);
  --ep-border-subtle: var(--ep-color-border-subtle);
  --ep-border-muted: var(--ep-color-border-muted);
  --ep-border-default: var(--ep-color-border);
  --ep-text-xs: var(--ep-font-size-xs);
  --ep-text-sm: var(--ep-font-size-sm);
  --ep-text-button: var(--ep-font-size-button);
  --ep-text-base: var(--ep-font-size-base);
  --ep-text-md: var(--ep-font-size-md);
  --ep-text-lg: var(--ep-font-size-lg);
  --ep-text-xl: var(--ep-font-size-xl);
  --ep-text-2xl: var(--ep-font-size-2xl);
  --ep-text-3xl: var(--ep-font-size-3xl);
  --ep-text-4xl: var(--ep-font-size-4xl);
  --ep-leading-tight: var(--ep-line-height-tight);
  --ep-leading-normal: var(--ep-line-height-normal);
  --ep-leading-relaxed: var(--ep-line-height-relaxed);
  --ep-leading-loose: var(--ep-line-height-loose);
  --ep-space-section-sm: var(--ep-section-padding-sm);
  --ep-space-section-md: var(--ep-section-padding-md);
  --ep-space-section-lg: var(--ep-section-padding-lg);
  --ep-breakpoint-sm: 640px;
  --ep-breakpoint-md: 768px;
  --ep-breakpoint-lg: 980px;
  --ep-breakpoint-xl: 1200px;
}