/* GTM Kit design tokens — generated from Figma file OAabufd2XuG1orHwrh7ixD */

:root {
  /* Color — primitives */
  --color-primary-50:  #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #2563eb;
  --color-primary-600: #1d4ed8;
  --color-primary-700: #1e40af;
  --color-primary-800: #1e3a8a;

  --color-premium-500: #7c3aed;
  --color-premium-600: #6d28d9;
  --color-premium-700: #5b21b6;

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

  --color-success-500: #10b981;
  --color-success-600: #059669;
  --color-danger-500:  #ef4444;
  --color-danger-600:  #dc2626;

  --color-white: #ffffff;
  --color-black: #000000;

  /* Color — semantic aliases (Light mode) */
  --color-brand-primary:         var(--color-primary-500);
  --color-brand-primary-hover:   var(--color-primary-600);
  --color-brand-primary-active:  var(--color-primary-700);
  --color-brand-secondary:       var(--color-premium-500);
  --color-brand-secondary-hover: var(--color-premium-600);

  --color-text-primary:     var(--color-neutral-900);
  --color-text-secondary:   var(--color-neutral-700);
  --color-text-tertiary:    var(--color-neutral-500);
  --color-text-muted:       var(--color-neutral-400);
  --color-text-on-brand:    var(--color-white);
  --color-text-brand:       var(--color-primary-600);
  --color-text-brand-hover: var(--color-primary-700);
  --color-text-danger:      var(--color-danger-500);
  --color-text-success:     var(--color-success-600);

  --color-surface-background:   var(--color-white);
  --color-surface-subtle:       var(--color-neutral-50);
  --color-surface-muted:        var(--color-neutral-100);
  --color-surface-inverse:      var(--color-neutral-900);
  --color-surface-card:         var(--color-white);
  --color-surface-brand-subtle: var(--color-primary-50);

  --color-border-default: var(--color-neutral-200);
  --color-border-strong:  var(--color-neutral-300);
  --color-border-brand:   var(--color-primary-500);
  --color-border-focus:   var(--color-primary-500);

  --color-state-success: var(--color-success-500);
  --color-state-danger:  var(--color-danger-500);

  /* Spacing */
  --space-0:  0;
  --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;
  --space-24: 96px;
  --space-32: 128px;

  /* Radius */
  --radius-none: 0;
  --radius-sm:   8px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* Motion */
  --motion-fast:    100ms;
  --motion-default: 150ms;
  --motion-medium:  200ms;
  --motion-slow:    300ms;
  --motion-ease:    cubic-bezier(0.4, 0, 0.2, 1);

  /* Breakpoints (informational — use in @media via build step or inline px) */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1440px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.04);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);

  /* Type — sizes, weights, line-heights mirror Figma text styles */
  --font-display:   56px;
  --font-h1:        48px;
  --font-h2:        40px;
  --font-h3:        32px;
  --font-h4:        24px;
  --font-h5:        20px;
  --font-body-xl:   17px;
  --font-body-lg:   16px;
  --font-body-md:   14px;
  --font-body-sm:   13px;

  --leading-tight:   1.1;
  --leading-snug:    1.2;
  --leading-normal:  1.4;
  --leading-relaxed: 1.6;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast:    0.01ms;
    --motion-default: 0.01ms;
    --motion-medium:  0.01ms;
    --motion-slow:    0.01ms;
  }
}