/**
 * UYN design tokens — loaded before component CSS so var() resolves reliably.
 * Mirrors theme_uyn_get_css_variables() defaults.
 */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap");

:root {
  --uyn-brand-orange: #ff7700;
  --uyn-brand-purple: #582e90;
  --uyn-brand-white: #ffffff;
  --uyn-brand-yellow: #f2af22;
  --uyn-brand-deep-orange: #e56624;
  --uyn-neutral-50: #fafafa;
  --uyn-neutral-100: #f4f4f5;
  --uyn-neutral-200: #e4e4e7;
  --uyn-neutral-300: #d4d4d8;
  --uyn-neutral-400: #a1a1aa;
  --uyn-neutral-500: #71717a;
  --uyn-neutral-600: #52525b;
  --uyn-neutral-700: #3f3f46;
  --uyn-neutral-800: #27272a;
  --uyn-neutral-900: #18181b;
  --uyn-muted: #6b7280;
  --uyn-gradient-brand: linear-gradient(135deg, #ff7700 0%, #582e90 100%);
  --uyn-gradient-hero: linear-gradient(120deg, #fff5eb 0%, #f3ecff 50%, #ffffff 100%);
  --uyn-gradient-cta-hover: linear-gradient(135deg, #e56624 0%, #4a2578 100%);
  --uyn-font-sans: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --uyn-font-display: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-family: var(--uyn-font-sans);
  --bs-font-sans-serif: var(--uyn-font-sans);
  --uyn-bg-learner: #faf8f5;
  --uyn-bg-learner-accent: linear-gradient(180deg, rgb(255 119 0 / 0.05) 0%, transparent 40%, rgb(88 46 144 / 0.04) 100%);
  --uyn-headline: var(--uyn-brand-purple);
  --uyn-muted-text: var(--uyn-neutral-600);
  --uyn-border-subtle: rgb(88 46 144 / 0.1);
  --uyn-gradient-surface: var(--uyn-gradient-hero);
  --uyn-gradient-skill-listening: linear-gradient(135deg, rgb(255 119 0 / 0.16) 0%, rgb(229 102 36 / 0.1) 100%);
  --uyn-gradient-skill-reading: linear-gradient(135deg, rgb(88 46 144 / 0.14) 0%, rgb(88 46 144 / 0.08) 100%);
  --uyn-gradient-skill-writing: linear-gradient(135deg, rgb(242 175 34 / 0.22) 0%, rgb(255 119 0 / 0.1) 100%);
  --uyn-gradient-skill-speaking: linear-gradient(135deg, rgb(229 102 36 / 0.16) 0%, rgb(242 175 34 / 0.14) 100%);
  --uyn-gradient-skill-course: var(--uyn-gradient-skill-reading);
  --uyn-gradient-skill-recent: var(--uyn-gradient-skill-listening);
  --uyn-gradient-skill-bookmark: var(--uyn-gradient-skill-writing);
  --uyn-gradient-skill-review: var(--uyn-gradient-skill-speaking);
  --uyn-hero-radius: clamp(1.5rem, 3vw, 3rem);
  --uyn-hero-shadow: 0 40px 100px -20px rgb(88 46 144 / 0.08);
  --uyn-shadow-sm: 0 1px 2px rgb(24 24 27 / 0.06);
  --uyn-shadow-md: 0 4px 12px rgb(24 24 27 / 0.08);
  --uyn-shadow-lg: 0 12px 32px rgb(88 46 144 / 0.12);
  --uyn-focus-ring: 0 0 0 3px rgb(255 119 0 / 0.35);
  --uyn-transition-base: 0.2s ease;
}

body.uyn-theme,
body.uyn-theme input,
body.uyn-theme button,
body.uyn-theme select,
body.uyn-theme textarea,
body.uyn-theme .btn,
body.uyn-theme .form-control,
body.uyn-theme .navbar,
body.uyn-theme .dropdown-menu,
body.uyn-theme .nav-link,
body.uyn-theme .card,
body.uyn-theme .modal,
body.uyn-theme table {
    font-family: var(--uyn-font-sans);
}