/* HDA Trafikskola v3 - design tokens, straight from DESIGN.md section 29.
   Guided progress: warm white, HDA blue and red, light-first. */

:root {
  color-scheme: light;

  --hda-blue-700: #0b4f9c;
  --hda-blue-800: #083f7e;
  --hda-blue-900: #062f60;
  --hda-red-600: #e6002d;
  --hda-red-700: #c90027;
  --hda-navy-900: #102b45;
  --hda-navy-700: #29465f;
  --hda-sky-100: #dceaf4;
  --hda-sky-50: #eff6fa;
  --hda-warm-50: #f7f5ef;
  --hda-white: #ffffff;
  --hda-sage-100: #e7eee8;

  --whatsapp-icon: #25d366;
  --whatsapp-action: #0b7a3b;
  --whatsapp-action-hover: #086832;
  --whatsapp-action-active: #075b2c;

  --success-700: #176b3a;
  --success-100: #e5f4ea;
  --warning-700: #8a5700;
  --warning-100: #fff2d6;
  --error-700: #b42318;
  --error-100: #fdecea;
  --focus: #005fcc;

  --neutral-950: #0b1720;
  --neutral-800: #263844;
  --neutral-600: #536773;
  --neutral-400: #91a1aa;
  --neutral-300: #b9c5cb;
  --neutral-200: #d5dee2;
  --neutral-100: #e9eff2;
  --neutral-50: #f6f9fa;

  --font-latin:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  --font-arabic: "Noto Sans Arabic", var(--font-latin);
  --font-devanagari: "Noto Sans Devanagari", var(--font-latin);
  --font-gurmukhi: "Noto Sans Gurmukhi", var(--font-latin);

  --text-xs: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.12vw, 0.9375rem);
  --text-base: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.06rem + 0.24vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.33rem + 0.65vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.55rem + 1.2vw, 2.5rem);
  --text-4xl: clamp(2.25rem, 1.7rem + 2vw, 3.5rem);
  --text-5xl: clamp(2.75rem, 1.7rem + 3.8vw, 5.5rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999px;

  --shadow-sm:
    0 1px 2px rgb(16 43 69 / 0.05),
    0 6px 18px rgb(16 43 69 / 0.05);
  --shadow-md:
    0 2px 4px rgb(16 43 69 / 0.05),
    0 14px 34px rgb(16 43 69 / 0.09);

  --card-border: 1px solid rgb(11 79 156 / 0.14);

  --container: 80rem;
  --container-wide: 90rem;
  --reading-width: 45rem;
}

/* script fonts per page language */
html[lang="ar"],
html[lang="fa"],
html[lang="fa-AF"],
html[lang="ps"],
html[lang="ur"] {
  font-family: var(--font-arabic);
}

html[lang="hi"] {
  font-family: var(--font-devanagari);
}

html[lang="pa"] {
  font-family: var(--font-gurmukhi);
}

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