/* ===================================================================
   REWORK DESIGN SYSTEM — Unified Design Tokens
   ===================================================================

   Bu fayl platformaning yagona "source of truth" dizayn tizimidir.
   Barcha CSS fayllar bu tokenlardan foydalanishi kerak.

   KATEGORIYALAR:
   1. Primitive Colors (xom ranglar)
   2. Semantic Colors (ma'noli ranglar: success, error, warning)
   3. Theme Colors (dark/light tema)
   4. Spacing Scale
   5. Typography Scale
   6. Shadows
   7. Border Radii
   8. Transitions
   9. Z-Index Scale

   USAGE:
   <link rel="stylesheet" href="/assets/design-tokens.css">

   =================================================================== */

:root {
  /* ==========================================
     1. PRIMITIVE COLORS (brand palette)
     ========================================== */
  --color-magenta-500: #B600A8;
  --color-magenta-600: #9100A6;
  --color-magenta-700: #7A0090;

  --color-purple-500: #7621B0;
  --color-purple-600: #5a1a8a;
  --color-purple-700: #3f1260;

  --color-orange-500: #BE4C00;
  --color-orange-400: #FF7A1A;
  --color-orange-300: #FF9A4A;

  --color-green-500: #3ba169;
  --color-green-600: #1f9d57;
  --color-green-700: #158a4a;

  --color-red-500: #e0455e;
  --color-red-600: #dc3a52;
  --color-red-700: #b82d42;

  --color-amber-500: #c98a14;
  --color-amber-600: #a87210;
  --color-amber-700: #8a5e0d;

  --color-gold-400: #F4DC8E;
  --color-gold-500: #E8C766;
  --color-gold-600: #C9A23F;
  --color-gold-700: #9a7b2e;

  /* Neutrals - Dark palette */
  --color-neutral-950: #0C0C0C;
  --color-neutral-900: #0E0E11;
  --color-neutral-850: #0a0a0a;
  --color-neutral-800: #141416;
  --color-neutral-750: #161619;
  --color-neutral-700: #17171C;
  --color-neutral-650: #1b1b1e;
  --color-neutral-600: #1d1d22;
  --color-neutral-500: #26262C;
  --color-neutral-400: #3a3640;
  --color-neutral-300: #6B6B72;
  --color-neutral-200: #9A9AA2;
  --color-neutral-100: #D7E2EA;
  --color-neutral-50: #ECECEF;

  /* Neutrals - Light palette */
  --color-cream-50: #FFFDF8;
  --color-cream-100: #F6F3EE;
  --color-cream-200: #F2F2EE;
  --color-cream-300: #EFEAE2;
  --color-cream-400: #F1ECE4;
  --color-cream-500: #ECECE6;
  --color-cream-600: #e0e0d8;

  /* Pure colors */
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* ==========================================
     2. SEMANTIC COLORS
     ========================================== */
  --color-success: var(--color-green-500);
  --color-success-dark: var(--color-green-600);
  --color-success-bg: rgba(59, 161, 105, 0.12);
  --color-success-bg-dark: rgba(31, 157, 87, 0.18);

  --color-error: var(--color-red-500);
  --color-error-dark: var(--color-red-600);
  --color-error-bg: rgba(224, 69, 94, 0.12);
  --color-error-bg-dark: rgba(220, 58, 82, 0.18);

  --color-warning: var(--color-amber-500);
  --color-warning-dark: var(--color-amber-600);
  --color-warning-bg: rgba(201, 138, 20, 0.14);
  --color-warning-bg-dark: rgba(201, 138, 20, 0.20);

  --color-info: var(--color-purple-500);
  --color-info-bg: rgba(118, 33, 176, 0.12);

  /* ==========================================
     3. BRAND GRADIENTS
     ========================================== */
  --gradient-vivid: linear-gradient(123deg, #18011F 4%, #B600A8 37%, #7621B0 70%, #BE4C00 100%);
  --gradient-vivid-horizontal: linear-gradient(90deg, #B600A8, #FF7A1A);
  --gradient-silver-dark: linear-gradient(180deg, #646973 0%, #BBCCD7 100%);
  --gradient-silver-light: linear-gradient(180deg, #3A3640 0%, #13111A 100%);
  --gradient-gold: linear-gradient(180deg, #F4DC8E, #E8C766 35%, #C9A23F 68%, #9a7b2e 100%);

  /* Course cover gradients */
  --gradient-smm: linear-gradient(123deg, #18011F 2%, #B600A8 40%, #7621B0 72%, #BE4C00 100%);
  --gradient-target: radial-gradient(110% 90% at 78% 12%, #B600A8, transparent 58%), linear-gradient(160deg, #1c0a26, #0c0c0c);
  --gradient-reels: radial-gradient(110% 90% at 24% 88%, #BE4C00, transparent 60%), linear-gradient(160deg, #241016, #0c0c0c);
  --gradient-dizayn: linear-gradient(140deg, #7621B0 0%, #B600A8 70%, #BE4C00 130%);
  --gradient-marketing: radial-gradient(100% 80% at 50% 0%, #2a2440, transparent 60%), linear-gradient(160deg, #17151c, #0c0c0c);
  --gradient-brend: linear-gradient(140deg, #BE4C00 0%, #7621B0 120%);

  /* ==========================================
     4. SPACING SCALE (8px base)
     ========================================== */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ==========================================
     5. TYPOGRAPHY SCALE
     ========================================== */
  --font-family-primary: 'Kanit', sans-serif;
  --font-family-display: 'Playfair Display', serif;

  /* Font sizes */
  --text-xs: 0.62rem;    /* 10px */
  --text-sm: 0.78rem;    /* 12.5px */
  --text-base: 0.88rem;  /* 14px */
  --text-md: 0.95rem;    /* 15px */
  --text-lg: 1.02rem;    /* 16px */
  --text-xl: 1.15rem;    /* 18px */
  --text-2xl: 1.35rem;   /* 21.5px */
  --text-3xl: 1.6rem;    /* 25.5px */
  --text-4xl: 2rem;      /* 32px */
  --text-5xl: 2.6rem;    /* 41.5px */
  --text-6xl: 3.4rem;    /* 54px */
  --text-7xl: 4.6rem;    /* 73.5px */

  /* Font weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;

  /* Line heights */
  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.4;
  --leading-relaxed: 1.55;
  --leading-loose: 1.65;

  /* Letter spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.1em;
  --tracking-widest: 0.16em;

  /* ==========================================
     6. SHADOWS
     ========================================== */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 50px -16px rgba(0, 0, 0, 0.5);
  --shadow-2xl: 0 40px 100px -50px rgba(0, 0, 0, 0.7);

  /* Brand shadows */
  --shadow-magenta: 0 14px 40px -12px rgba(182, 0, 168, 0.8);
  --shadow-magenta-sm: 0 10px 26px -10px rgba(182, 0, 168, 0.7);
  --shadow-vivid: 0 4px 4px rgba(181, 1, 167, 0.25), 4px 4px 12px #7721B1 inset;

  /* ==========================================
     7. BORDER RADII
     ========================================== */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 22px;
  --radius-3xl: 28px;
  --radius-full: 999px;

  /* ==========================================
     8. TRANSITIONS
     ========================================== */
  --ease-default: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-bounce: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-spring: cubic-bezier(0.5, 1.8, 0.5, 0.8);

  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
  --duration-slower: 550ms;

  --transition-colors: color var(--duration-normal), background-color var(--duration-normal), border-color var(--duration-normal);
  --transition-transform: transform var(--duration-normal) var(--ease-default);
  --transition-all: all var(--duration-normal) var(--ease-default);

  /* ==========================================
     9. Z-INDEX SCALE
     ========================================== */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-drawer: 40;
  --z-modal-backdrop: 50;
  --z-modal: 60;
  --z-popover: 70;
  --z-tooltip: 80;
  --z-toast: 90;
  --z-max: 100;

  /* ==========================================
     10. BREAKPOINTS (reference only, use in media queries)
     ========================================== */
  /* --bp-sm: 480px; */
  /* --bp-md: 680px; */
  /* --bp-lg: 880px; */
  /* --bp-xl: 1000px; */
  /* --bp-2xl: 1280px; */
}

/* ===========================================
   DARK THEME (default)
   =========================================== */
:root,
[data-theme="dark"] {
  /* Background colors */
  --bg-primary: var(--color-neutral-950);
  --bg-secondary: var(--color-neutral-850);
  --bg-panel: var(--color-neutral-800);
  --bg-panel-2: var(--color-neutral-650);
  --bg-elevated: var(--color-neutral-700);
  --bg-hover: rgba(215, 226, 234, 0.1);

  /* Text colors */
  --text-primary: var(--color-neutral-100);
  --text-secondary: rgba(219, 229, 237, 0.72);  /* WCAG AA uchun ko'tarildi (avval 0.58 — kichik matnda kontrast past edi) */
  --text-muted: var(--color-neutral-200);
  --text-inverted: var(--color-neutral-950);

  /* Border colors */
  --border-primary: rgba(215, 226, 234, 0.12);
  --border-hover: rgba(215, 226, 234, 0.35);
  --border-focus: var(--color-magenta-500);

  /* Navigation */
  --nav-bg: rgba(12, 12, 12, 0.55);
  --nav-bg-scroll: rgba(12, 12, 12, 0.82);

  /* Accent (primary brand color) */
  --accent: var(--color-magenta-500);
  --accent-hover: var(--color-magenta-600);
  --accent-gradient: var(--gradient-vivid);

  /* Brand accent TEXT (WCAG AA >=4.5:1 on dark #0C0C0C).
     NOT a fill — use --color-orange-400/500 for gradients/fills.
     Deepened brand orange: 6.06:1 on --bg-primary (dark). */
  --brand-accent-text: #E07022;

  /* Kicker/highlight color — points at the AA-safe accent-text token */
  --kicker: var(--brand-accent-text);

  /* Selection */
  --selection-bg: var(--color-magenta-500);
  --selection-text: var(--color-white);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(182, 0, 168, 0.16);

  /* Silver gradient for text */
  --gradient-silver: var(--gradient-silver-dark);
}

/* ===========================================
   LIGHT THEME
   =========================================== */
[data-theme="light"] {
  /* Background colors */
  --bg-primary: var(--color-cream-100);
  --bg-secondary: var(--color-cream-300);
  --bg-panel: var(--color-cream-50);
  --bg-panel-2: var(--color-cream-400);
  --bg-elevated: var(--color-cream-200);
  --bg-hover: rgba(24, 20, 28, 0.06);

  /* Text colors */
  --text-primary: #171520;
  --text-secondary: rgba(23, 21, 32, 0.68);  /* darkened for WCAG AA (>=4.5:1 on light bg) */
  --text-muted: var(--color-neutral-300);
  --text-inverted: var(--color-white);

  /* Border colors */
  --border-primary: rgba(24, 20, 28, 0.13);
  --border-hover: rgba(24, 20, 28, 0.3);
  --border-focus: var(--color-magenta-500);

  /* Navigation */
  --nav-bg: rgba(246, 243, 238, 0.62);
  --nav-bg-scroll: rgba(246, 243, 238, 0.88);

  /* Brand accent TEXT (WCAG AA) — darker on light cream bg.
     5.80:1 on --bg-primary (light #F6F3EE). --kicker inherits this. */
  --brand-accent-text: #a04200;

  /* Silver gradient for text (darker for light bg) */
  --gradient-silver: var(--gradient-silver-light);
}

/* ===========================================
   ADMIN THEME TOKENS
   These extend the base theme with admin-specific tokens
   =========================================== */
:root,
[data-theme="dark"] {
  /* Admin-specific backgrounds */
  --admin-bg: var(--color-neutral-900);
  --admin-bg2: var(--color-neutral-700);
  --admin-panel: var(--color-neutral-750);

  /* Admin shadow */
  --admin-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.55);

  /* Glass effect */
  --glass-blur: saturate(1.25) blur(20px);
  --glass-bg: rgba(20, 20, 26, 0.72);
  --glass-rim: inset 1px 1px 0 rgba(255, 255, 255, 0.10);
}

[data-theme="light"] {
  /* Admin-specific backgrounds */
  --admin-bg: var(--color-cream-100);
  --admin-bg2: var(--color-cream-200);
  --admin-panel: var(--color-cream-50);

  /* Admin shadow (lighter) */
  --admin-shadow: 0 4px 14px rgba(17, 24, 39, 0.05);

  /* Glass effect */
  --glass-bg: rgba(250, 250, 247, 0.72);
}

/* ===========================================
   UTILITY CLASSES
   =========================================== */

/* Text gradient */
.text-gradient {
  background: var(--gradient-silver);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.text-gradient-vivid {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Focus visible */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Global keyboard focus indicator (WCAG 2.4.7) — every interactive element across
   all surfaces gets a visible ring when reached by keyboard. `:focus-visible` means
   mouse clicks don't show it. `outline` follows each element's border-radius, so it
   fits pills and rounded-rects alike. Offset keeps it visible over filled buttons. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent, #B600A8);
  outline-offset: 2px;
}

/* Skip link (WCAG 2.4.1) — visually hidden until keyboard focus. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 1000;
  background: var(--bg-primary, #0a0a0a);
  color: var(--text-primary, #fff);
  border: 1px solid var(--border-primary, #333);
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus {
  top: 8px;
  outline: 2px solid var(--accent, #B600A8);
  outline-offset: 2px;
}

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

/* Performance lite mode */
html.perf-lite *,
html.perf-lite *::before,
html.perf-lite *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.perf-lite .marquee .mtrack,
html.perf-lite .kc-cover .orb,
html.perf-lite .kc-cover .num,
html.perf-lite .live-dot,
html.perf-lite [class*="pulse"] {
  animation: none !important;
}