:root {
  --color-primary:        #1a1a2e;
  --color-primary-light:  #16213e;
  --color-secondary:      #0f3460;
  --color-accent:         #e94560;
  --color-accent-hover:   #c73652;

  --color-bg:             #ffffff;
  --color-bg-alt:         #f8f9fa;
  --color-bg-dark:        #1a1a2e;

  --color-text:           #1a1a1a;
  --color-text-muted:     #6b7280;
  --color-text-light:     #9ca3af;
  --color-text-inverse:   #ffffff;

  --color-border:         #e5e7eb;
  --color-border-dark:    #d1d5db;

  --color-success:        #10b981;
  --color-success-bg:     #ecfdf5;
  --color-warning:        #f59e0b;
  --color-warning-bg:     #fffbeb;
  --color-error:          #ef4444;
  --color-error-bg:       #fef2f2;
  --color-info:           #3b82f6;
  --color-info-bg:        #eff6ff;

  --font-base:            'Inter', system-ui, sans-serif;
  --font-heading:         'Inter', system-ui, sans-serif;
  --font-mono:            'JetBrains Mono', monospace;

  --font-size-xs:         0.75rem;
  --font-size-sm:         0.875rem;
  --font-size-base:       1rem;
  --font-size-lg:         1.125rem;
  --font-size-xl:         1.25rem;
  --font-size-2xl:        1.5rem;
  --font-size-3xl:        1.875rem;
  --font-size-4xl:        2.25rem;
  --font-size-5xl:        3rem;

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

  --line-height-tight:    1.25;
  --line-height-base:     1.6;
  --line-height-relaxed:  1.75;

  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1536px;

  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;

  --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.1);

  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  --header-height:        64px;
  --header-bg:            var(--color-bg);
  --header-border:        var(--color-border);
  --header-text:          var(--color-text);

  --btn-radius:           var(--radius-md);
  --btn-padding-x:        var(--space-6);
  --btn-padding-y:        var(--space-3);
  --btn-font-weight:      var(--font-weight-medium);
  --btn-color:            var(--color-accent);
  --btn-text-color:       var(--color-text-inverse);
}