/* ==========================================================================
   MTITR Design System — tokens & base
   Theme: Technology · Innovation · Digitalisation · Education · Data · Future
   Every colour has one job:
     primary  = actions, links, active states      secondary = data/tech highlights
     accent   = TIK / special emphasis              success/warning/danger/info = status only
   ========================================================================== */
:root {
  --on-color: #fff;          /* text / icons on filled brand, status and hero surfaces (both themes) */
  /* always-dark hero / auth / dark sections (same in light and dark theme) */
  --hero-900: #0A1834;
  --hero-800: #0F2A5E;
  --hero-700: #123D86;
  --hero-accent: #7DD3FC;
  --hero-accent-2: #A5B4FC;
  --hero-text: #C9D8F0;
  --hero-text-strong: #D6E4FB;
  --hero-text-soft: #CFE3FF;
  --hero-muted: #B6C6E2;
  --hero-line: #C9D6EE;
  --primary: #2563EB;
  --primary-dark: #1D4ED8;
  --primary-soft: #EAF1FF;
  --secondary: #0E7490;
  --secondary-soft: #E3F7FB;
  --accent: #6D28D9;
  --accent-soft: #F1EBFF;
  --success: #166534;
  --success-soft: #E7F6EC;
  --warning: #B45309;
  --warning-soft: #FEF3E2;
  --danger: #DC2626;
  --danger-soft: #FDECEC;
  --info: #0369A1;
  --info-soft: #E6F3FB;
  --orange: #C2410C;
  --orange-soft: #FFEEE5;

  --bg: #F5F8FC;
  --surface: #FFFFFF;
  --surface-2: #F8FAFD;
  --text: #0F172A;
  --text-2: #334155;
  --muted: #5B6B82;
  --border: #E2E8F0;
  --border-strong: #CBD5E1;
  --navy: #0B1B3A;
  --navy-2: #102A56;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow: 0 4px 16px rgba(15, 23, 42, .07), 0 1px 3px rgba(15, 23, 42, .05);
  --shadow-lg: 0 18px 48px rgba(15, 23, 42, .16);
  --ring: 0 0 0 3px rgba(37, 99, 235, .35);

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --header-h: 64px;
  --sidebar-w: 260px;

  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --t-fast: .15s ease;
  --t: .22s cubic-bezier(.2, .8, .2, 1);

  /* subtle tech background: fine dot grid */
  --pattern: radial-gradient(rgba(37, 99, 235, .09) 1px, transparent 1.2px);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --primary: #4F8BFF;
  --primary-dark: #3B78F0;
  --primary-soft: #16264A;
  --secondary: #22C3E6;
  --secondary-soft: #0E2B36;
  --accent: #A78BFA;
  --accent-soft: #261B45;
  --success: #34D399;
  --success-soft: #0F2E24;
  --warning: #FBBF24;
  --warning-soft: #33260B;
  --danger: #F87171;
  --danger-soft: #3A1517;
  --info: #38BDF8;
  --info-soft: #0C2A3B;
  --orange: #FB923C;
  --orange-soft: #37200F;
  --bg: #0A1120;
  --surface: #111A2E;
  --surface-2: #0E1628;
  --text: #E6EDF7;
  --text-2: #C3CEDD;
  --muted: #95A3B8;
  --border: #22304B;
  --border-strong: #31415F;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 4px 16px rgba(0, 0, 0, .35);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .55);
  --pattern: radial-gradient(rgba(96, 140, 255, .10) 1px, transparent 1.2px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0; min-width: 320px; overflow-x: hidden;
  font-family: var(--font); font-size: 15px; line-height: 1.55; color: var(--text);
  background-color: var(--bg);
  background-image: var(--pattern);
  background-size: 22px 22px;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
img, svg, video, canvas { max-width: 100%; }
img, video { height: auto; }

/* Typography hierarchy */
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; color: var(--text); }
h1 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); }
h2 { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.75rem); }
h3 { font-size: 1.12rem; }
h4 { font-size: 1rem; }
p { margin: 0 0 .8em; overflow-wrap: anywhere; }
small, .small { font-size: .85rem; }
.caption { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--secondary); }
.muted { color: var(--muted); }
a { color: var(--primary); text-underline-offset: 2px; }
code, pre { font-family: var(--font-mono); }
hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 10001; background: var(--surface); color: var(--primary); padding: 10px 14px; border-radius: var(--radius-sm); box-shadow: var(--shadow); transition: top var(--t-fast); }
.skip-link:focus { top: 12px; }
[hidden] { display: none !important; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.stack > * + * { margin-top: 12px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row-between { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.ic { flex: 0 0 auto; display: inline-block; vertical-align: middle; }

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