/* ─── WHOIS CRM Design System Tokens ───────────────────────────────────────── */

:root {
  /* Palette colors */
  --color-primary:          #FF6621;   /* CTA buttons, links, active nav */
  --color-primary-dark:     #E5571A;   /* Hover state of primary */
  --color-primary-light:    #FF8950;   /* Light tint */
  --color-accent:           #FFB020;   /* Tags, highlights, secondary badges */
  --color-accent-dark:      #E09A0F;   /* Hover state of accent */
  --color-white:            #FFFFFF;
  --color-black:            #0A0A0B;
  --color-surface:          #F8F8FA;   /* Page background */
  --color-surface-raised:   #FFFFFF;   /* Card background */
  --color-surface-overlay:  #F2F2F5;   /* Row hover, subtle fills */
  --color-border:           #E8E8EF;   /* Default borders */
  --color-border-strong:    #D0D0DD;   /* Table dividers */
  --color-text-primary:     #0A0A0B;
  --color-text-secondary:   #5C5C6B;
  --color-text-muted:       #9898A8;
  --color-text-inverse:     #FFFFFF;
  --color-success:          #1DB954;
  --color-warning:          #FFB020;
  --color-danger:           #E53535;
  --color-info:             #3B82F6;

  /* Typography Scale */
  --font-family:            'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --text-display:           2.25rem;   /* 36px — hero heading, plan price display */
  --text-h1:                1.875rem;  /* 30px — page titles */
  --text-h2:                1.5rem;    /* 24px — section headings */
  --text-h3:                1.25rem;   /* 20px — card titles */
  --text-h4:                1.125rem;  /* 18px — table headers */
  --text-body-lg:           1rem;      /* 16px — primary body */
  --text-body:              0.9375rem; /* 15px — standard text */
  --text-body-sm:           0.875rem;  /* 14px — helper text */
  --text-caption:           0.8125rem; /* 13px — timestamps, meta */
  --text-overline:          0.75rem;   /* 12px — badges, labels (UPPERCASE) */

  /* Spacing Scale */
  --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;

  /* Border Radii */
  --radius-sm:              4px;
  --radius-md:              8px;
  --radius-lg:              12px;
  --radius-xl:              16px;
  --radius-2xl:             24px;
  --radius-full:            9999px;

  /* Shadows */
  --shadow-sm:              0 1px 2px rgba(10,10,11,0.06), 0 1px 3px rgba(10,10,11,0.04);
  --shadow-md:              0 4px 6px rgba(10,10,11,0.06), 0 2px 4px rgba(10,10,11,0.04);
  --shadow-lg:              0 10px 15px rgba(10,10,11,0.08), 0 4px 6px rgba(10,10,11,0.05);
  --shadow-xl:              0 20px 25px rgba(10,10,11,0.10), 0 10px 10px rgba(10,10,11,0.04);
  --shadow-glow-primary:    0 0 0 3px rgba(255,102,33,0.20);
  --shadow-glow-accent:     0 0 0 3px rgba(255,176,32,0.20);

  /* Animation Easings & Durations */
  --ease-out:               cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in:                cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:            cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:            cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:            cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --duration-instant:       80ms;
  --duration-fast:          150ms;
  --duration-normal:        250ms;
  --duration-slow:          400ms;
  --duration-slower:        600ms;
}

/* ─── Keyframe Animations ─────────────────────────────────────────────────── */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}