/* 
  Suno Pro Design Tokens (2026 Edition)
  3-Tier Architecture using OKLCH color space for perceptual uniformity
*/

:root {
  /* =========================================
     1. TIER 1: PRIMITIVE TOKENS (Base Values)
     ========================================= */

  /* Raw Neutral Scale (OKLCH Slate) */
  --raw-slate-950: oklch(0.12 0.005 260);
  --raw-slate-900: oklch(0.15 0.005 260);
  --raw-slate-850: oklch(0.19 0.005 260);
  --raw-slate-800: oklch(0.24 0.005 260);
  --raw-slate-700: oklch(0.30 0.005 260);
  --raw-slate-500: oklch(0.58 0.01 260); /* WCAG AA: >= 4.5:1 on dark backgrounds */
  --raw-slate-300: oklch(0.78 0.01 260);
  --raw-slate-50:  oklch(0.98 0.005 260);

  /* Raw Brand Accents */
  --raw-azure: oklch(0.68 0.16 250);
  --raw-pink: oklch(0.65 0.18 20);
  --raw-purple: oklch(0.65 0.18 290);
  --raw-neon-yellow: oklch(0.92 0.19 98);
  --raw-telegram-blue: oklch(0.72 0.15 230);
  --raw-gold: oklch(0.85 0.14 80);
  --raw-emerald: oklch(0.75 0.16 150);
  --raw-crimson: oklch(0.66 0.20 25);

  /* =========================================
     2. TIER 2: SEMANTIC TOKENS
     ========================================= */

  /* Brand Colors */
  --color-brand-primary: var(--raw-azure);
  --color-brand-secondary: var(--raw-pink);
  --color-brand-purple: var(--raw-purple);
  --color-brand-yellow: var(--raw-neon-yellow);
  --color-brand-telegram: var(--raw-telegram-blue);
  --color-premium-gold: var(--raw-gold);
  --color-link: var(--color-premium-gold);
  --color-link-hover: color-mix(in oklch, var(--color-premium-gold) 80%, white);

  /* Semantic State Colors (WCAG 2.1 AA Compliant) */
  --color-success: var(--raw-emerald);
  --color-success-bg: oklch(0.24 0.05 150);
  --color-warning: oklch(0.82 0.15 70);
  --color-warning-bg: oklch(0.26 0.05 70);
  --color-danger: var(--raw-crimson);
  --color-danger-bg: oklch(0.22 0.08 25);

  /* Neutral & Surface Scale */
  --color-bg-base: var(--raw-slate-950);
  --color-surface-0: var(--raw-slate-900);
  --color-surface-1: var(--raw-slate-850);
  --color-surface-2: var(--raw-slate-800);
  --color-surface-3: var(--raw-slate-700);

  /* Text Scale */
  --color-text-base: var(--raw-slate-50);
  --color-text-strong: var(--raw-slate-50);
  --color-text-muted: var(--raw-slate-300);
  --color-text-subtle: var(--raw-slate-500);
  --color-text-inverse: var(--raw-slate-950);

  /* Dynamic Interactive States */
  --color-surface-hover: color-mix(in oklch, var(--color-text-base) 4%, var(--color-surface-1));
  --color-surface-active: color-mix(in oklch, var(--color-text-base) 8%, var(--color-surface-1));
  --color-disabled-bg: color-mix(in oklch, var(--color-text-base) 5%, transparent);
  --color-disabled-text: color-mix(in oklch, var(--color-text-base) 30%, transparent);

  /* Form Controls */
  --color-input-bg: var(--color-surface-3);
  --color-input-border: color-mix(in oklch, var(--color-text-base) 10%, transparent);
  --color-input-border-hover: color-mix(in oklch, var(--color-text-base) 20%, transparent);
  --color-input-border-focus: var(--color-premium-gold);
  --color-input-placeholder: color-mix(in oklch, var(--color-text-base) 35%, transparent);

  /* Overlays & Modals */
  --color-overlay-backdrop: rgba(0, 0, 0, 0.65);
  --color-modal-bg: oklch(0.16 0.005 260 / 0.95);
  --color-modal-border: color-mix(in oklch, var(--color-text-base) 10%, transparent);
  --color-tooltip-bg: oklch(0.20 0.005 260);
  --color-popover-bg: oklch(0.18 0.005 260);

  /* Glassmorphism Surfaces */
  --surface-glass-soft: linear-gradient(180deg, color-mix(in oklch, var(--color-text-base) 3%, transparent), color-mix(in oklch, var(--color-text-base) 1%, transparent));
  --surface-glass-base: linear-gradient(180deg, color-mix(in oklch, var(--color-text-base) 5%, transparent), color-mix(in oklch, var(--color-text-base) 2%, transparent));
  --surface-glass-hover: linear-gradient(180deg, color-mix(in oklch, var(--color-text-base) 8%, transparent), color-mix(in oklch, var(--color-text-base) 4%, transparent));
  --surface-glass-active: linear-gradient(180deg, var(--color-text-base) 0%, color-mix(in oklch, var(--color-text-base) 90%, black) 100%);

  /* Borders */
  --color-border-subtle: color-mix(in oklch, var(--color-text-base) 4%, transparent);
  --color-border-base: color-mix(in oklch, var(--color-text-base) 8%, transparent);
  --color-border-strong: color-mix(in oklch, var(--color-text-base) 14%, transparent);

  --border-subtle: 1px solid var(--color-border-subtle);
  --border-base: 1px solid var(--color-border-base);
  --border-strong: 1px solid var(--color-border-strong);

  /* Gradients */
  --gradient-brand-cta: linear-gradient(135deg, oklch(0.85 0.16 80) 0%, oklch(0.70 0.20 40) 50%, oklch(0.70 0.24 320) 100%);
  --gradient-bonus-green: linear-gradient(135deg, oklch(0.85 0.18 150), oklch(0.65 0.15 160));
  --gradient-bonus-fire: linear-gradient(135deg, oklch(0.70 0.22 15), oklch(0.65 0.22 35));
  --gradient-telegram: linear-gradient(135deg, oklch(0.75 0.14 240), oklch(0.60 0.16 250));

  /* Z-INDEX ELEVATION SCALE */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-drawer-overlay: 300;
  --z-drawer: 400;
  --z-global-player: 560;
  --z-bottom-nav: 650;
  --z-cookie: 670;
  --z-chatbot: 700;
  --z-modal: 800;
  --z-toast: 900;
  --z-tooltip: 950;

  /* TYPOGRAPHY 2026 EDITION */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --text-xs: 0.75rem;   /* 12px */
  --text-sm: 0.875rem;  /* 14px */
  --text-base: 1rem;    /* 16px */
  --text-lg: 1.125rem;  /* 18px */
  --text-xl: 1.25rem;   /* 20px */
  --text-2xl: 1.5rem;   /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem;  /* 36px */

  /* SPACING SCALE */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-12: 3rem;    /* 48px */

  /* RADIUS SCALE */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 32px;
  --radius-pill: 9999px;

  /* SHADOWS & ELEVATION */
  --shadow-inset-soft: inset 0 1px 0 color-mix(in oklch, var(--color-text-base) 3%, transparent);
  --shadow-inset-strong: inset 0 1px 0 color-mix(in oklch, var(--color-text-base) 8%, transparent);

  --shadow-float-sm: 0 4px 12px rgba(0,0,0,0.15);
  --shadow-float-md: 0 8px 24px rgba(0,0,0,0.25);
  --shadow-float-lg: 0 16px 40px rgba(0,0,0,0.35);

  --shadow-glow-primary: 0 0 24px color-mix(in oklch, var(--color-brand-primary) 20%, transparent);
  --shadow-glow-gold: 0 0 24px color-mix(in oklch, var(--color-premium-gold) 25%, transparent);
  --shadow-glow-yellow: 0 0 24px color-mix(in oklch, var(--color-brand-yellow) 25%, transparent);

  --focus-ring: 0 0 0 3px color-mix(in oklch, var(--color-premium-gold) 35%, transparent);

  /* MOTION & TRANSITIONS */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast: 0.15s;
  --duration-base: 0.25s;
  --duration-slow: 0.4s;

  /* CONTAINER & LAYOUT GRIDS (2026 Standard) */
  --container-wide: 1400px;
  --container-reading: 960px;
  --container-compact: 720px;

  /* =========================================
     3. TIER 3: COMPONENT SPECIFIC ALIASES
     ========================================= */
  /* Buttons System Standard (2026 Edition) */
  --btn-radius: var(--radius-md);
  --btn-radius-pill: var(--radius-pill);
  --btn-height-sm: 36px;
  --btn-height-md: 44px;
  --btn-height-lg: 52px;
  --btn-font-weight: 600;
  --btn-primary-bg: var(--color-brand-primary);
  --btn-primary-text: var(--color-text-base);
  --btn-yellow-bg: var(--color-brand-yellow);
  --btn-yellow-text: var(--color-text-inverse);

  /* Cards */
  --card-bg: var(--color-surface-1);
  --card-border: var(--border-base);
  --card-radius: var(--radius-xl);

  /* Global Audio Player */
  --player-bar-bg: oklch(0.15 0.005 260 / 0.90);
  --player-bar-border: var(--border-subtle);
  --global-player-inset-x: 12px;
  --global-player-bottom: 12px;
  --global-player-reserve: 124px;

  /* Chatbot */
  --chatbot-bg: oklch(0.14 0.005 260 / 0.92);
  --chatbot-border: var(--border-subtle);
  --chatbot-btn-bg: var(--color-brand-primary);
  --chatbot-btn-text: var(--color-text-base);
  --chatbot-bubble-user-bg: var(--color-brand-primary);
  --chatbot-bubble-bot-bg: var(--surface-glass-soft);

  /* Profile Tokens */
  --profile-muted: var(--color-text-muted);
  --profile-text: var(--color-text-base);
  --profile-success: var(--color-success);
  --profile-danger: var(--color-danger);
  --profile-surface-soft: var(--surface-glass-soft);

  /* Studio & Feed System Tokens */
  --studio-surface-1: var(--color-surface-1);
  --studio-surface-2: var(--color-surface-2);
  --studio-surface-hover: var(--color-surface-hover);
  --studio-border-soft: var(--border-subtle);
  --studio-border-strong: var(--border-strong);
  --studio-shadow-soft: var(--shadow-float-sm);
  --studio-shadow-raised: var(--shadow-float-md);
  --studio-text-primary: var(--color-text-base);
  --studio-text-secondary: var(--color-text-muted);
  --studio-text-muted: var(--color-text-subtle);
  --studio-pill-bg: var(--surface-glass-soft);
  --studio-pill-border: var(--border-subtle);
  --studio-pill-text: var(--color-text-base);
  --studio-pill-shadow: var(--shadow-inset-soft);
  --studio-control-bg: var(--color-surface-2);
  --studio-control-border: var(--border-subtle);

  /* Animation delays fallback */
  --reveal-delay: 0ms;

  /* =========================================
     4. BACKWARD COMPATIBILITY ALIASES (--ds-*)
     ========================================= */
  --ds-transition-fast: var(--duration-fast) var(--ease-out);
  --ds-transition-base: var(--duration-base) var(--ease-out);
  --ds-transition-slow: var(--duration-slow) var(--ease-out);
  --ds-radius-sm: var(--radius-sm);
  --ds-radius-md: var(--radius-md);
  --ds-radius-lg: var(--radius-lg);
  --ds-radius-pill: var(--radius-pill);
  --ds-text-strong: var(--color-text-base);
  --ds-text-muted: var(--color-text-muted);
  --ds-text-soft: var(--color-text-subtle);
  --ds-border-soft: var(--border-subtle);
  --ds-border-strong: var(--border-strong);
  --ds-surface-1: var(--color-surface-1);
  --ds-surface-2: var(--color-surface-2);
  --ds-surface-3: var(--color-surface-3);
  --ds-surface-3-hover: var(--color-surface-hover);
  --ds-surface-active: var(--color-surface-active);
  --ds-shadow-card: var(--shadow-float-sm);
  --ds-shadow-pill: var(--shadow-float-sm);
  --ds-shadow-soft: var(--shadow-float-sm);
  --ds-shadow-active: var(--shadow-float-md);
  --ds-focus-ring: var(--focus-ring);
}

/* Global Scrollbars System Standard */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-surface-3) transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-surface-3);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-surface-2);
}

/* Global Shared Keyframes */
@keyframes magicFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Accessibility Resets */
@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;
  }
}