/**
 * DESIGN TOKENS SYSTEM
 * Free Marketing Tools & YouTube Creator Toolbox
 * Strict adherence to WCAG 2.2 AA & token specifications
 */

:root {
  /* Typography Foundations */
  --font-family-primary: 'Plus Jakarta Sans', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'IBM Plex Mono', SFMono-Regular, Consolas, monospace;

  --font-size-xs: 11.5px;
  --font-size-sm: 13.5px;
  --font-size-md: 16px;
  --font-size-lg: 19px;
  --font-size-xl: 24px;
  --font-size-2xl: 28px;
  --font-size-3xl: 36px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --line-height-tight: 1.2;
  --line-height-base: 1.5; /* 20.25px at 13.5px, 24px at 16px */
  --line-height-relaxed: 1.65;

  /* Spacing Scale */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;

  /* Radius Tokens */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 9999px;

  /* Elevation & Shadows */
  --shadow-xs: 0 1px 2px rgba(28, 26, 25, 0.05);
  --shadow-sm: 0 2px 6px rgba(28, 26, 25, 0.08);
  --shadow-md: 0 6px 18px rgba(28, 26, 25, 0.10);
  --shadow-lg: 0 12px 32px rgba(28, 26, 25, 0.14);
  --shadow-hover: 0 8px 24px rgba(28, 26, 25, 0.12);

  /* Motion Tokens */
  --motion-duration-instant: 50ms;
  --motion-duration-fast: 150ms;
  --motion-duration-normal: 250ms;
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Brand Accents */
  --color-brand-primary: #ff0033; /* Creator Red */
  --color-brand-hover: #e0002d;
  --color-brand-subtle: #fff1f3;
  --color-brand-border: #ffccd4;
  --color-brand-glow: rgba(255, 0, 51, 0.2);

  /* Semantic Feedback */
  --color-success: #0f8548;
  --color-success-subtle: #eafaf1;
  --color-warning: #b36b00;
  --color-warning-subtle: #fef7ec;
  --color-danger: #cf222e;
  --color-danger-subtle: #ffebe9;
  --color-info: #0969da;
  --color-info-subtle: #eef6ff;

  --color-focus-ring: #0969da;
}

/* Light Theme (Default) */
[data-theme="light"], :root:not([data-theme="dark"]) {
  --color-text-primary: #1c1a19;
  --color-text-secondary: #6f6a66;
  --color-text-tertiary: #8f8a85;
  --color-text-inverse: #ffffff;

  --color-surface-base: #fbfaf8;
  --color-surface-muted: #f3efe9;
  --color-surface-raised: #ffffff;
  --color-surface-strong: #1c1a19;
  --color-surface-translucent: rgba(255, 255, 255, 0.85);

  --color-border-subtle: #e6e1da;
  --color-border-strong: #1c1a19;
  --color-border-focus: #0969da;

  --color-card-border: #e8e3dc;
  --color-card-hover-border: #b8b1a8;

  --color-badge-free-bg: #eaf8ee;
  --color-badge-free-text: #0d703b;
  --color-badge-pro-bg: #fff0f3;
  --color-badge-pro-text: #d9002c;
  --color-badge-limit-bg: #fef3e2;
  --color-badge-limit-text: #a05a00;
}

/* Dark Theme */
[data-theme="dark"] {
  --color-text-primary: #f4f3f1;
  --color-text-secondary: #a7a29c;
  --color-text-tertiary: #75706a;
  --color-text-inverse: #11100f;

  --color-surface-base: #0c0d10;
  --color-surface-muted: #15171d;
  --color-surface-raised: #1c1f26;
  --color-surface-strong: #272c36;
  --color-surface-translucent: rgba(18, 20, 26, 0.88);

  --color-border-subtle: #292d37;
  --color-border-strong: #dedad4;
  --color-border-focus: #58a6ff;

  --color-card-border: #282c36;
  --color-card-hover-border: #434958;

  --color-brand-primary: #ff2b56;
  --color-brand-hover: #ff476e;
  --color-brand-subtle: #301016;
  --color-brand-border: #591b26;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.7);
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.65);

  --color-badge-free-bg: #102d1d;
  --color-badge-free-text: #4ee08b;
  --color-badge-pro-bg: #3c1219;
  --color-badge-pro-text: #ff6685;
  --color-badge-limit-bg: #33200b;
  --color-badge-limit-text: #ffbf66;

  --color-focus-ring: #58a6ff;
}

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}