/* ==========================================================================
   AI Univerzita — Design Tokens
   Single source of truth for color tokens, type scale, and semantic styles.
   ========================================================================== */

/* ---- Webfonts ---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- Brand colors (raw) --------------------------------------------- */
  --aiu-navy:       #00163B;
  --aiu-blue:       #0075EE;
  --aiu-cyan:       #0094BF;
  --aiu-teal:       #00B095;
  --aiu-off-white:  #F5F5F5;
  --aiu-white:      #FFFFFF;

  /* ---- Neutrals (derived) --------------------------------------------- */
  --aiu-ink:        #0A1229;
  --aiu-slate-700:  #2A3552;
  --aiu-slate-500:  #5B6686;
  --aiu-slate-300:  #B6BDCE;
  --aiu-slate-200:  #D8DDE8;
  --aiu-slate-100:  #ECEFF5;

  /* ---- Semantic — surfaces -------------------------------------------- */
  --bg-dark:        var(--aiu-navy);
  --bg-light:       var(--aiu-off-white);
  --bg-canvas:      var(--aiu-white);
  --bg-card:        var(--aiu-white);
  --bg-card-dark:   #0A2154;
  --bg-subtle:      var(--aiu-slate-100);

  /* ---- Semantic — foreground ------------------------------------------ */
  --fg-on-dark-1:   var(--aiu-white);
  --fg-on-dark-2:   rgba(255,255,255,.72);
  --fg-on-dark-3:   rgba(255,255,255,.48);
  --fg-on-light-1:  var(--aiu-navy);
  --fg-on-light-2:  var(--aiu-slate-500);
  --fg-on-light-3:  var(--aiu-slate-300);

  /* ---- Semantic — borders --------------------------------------------- */
  --border-dark:    rgba(255,255,255,.14);
  --border-light:   var(--aiu-slate-200);
  --border-strong:  var(--aiu-slate-300);

  /* ---- Signature gradient --------------------------------------------- */
  --aiu-gradient:      linear-gradient(135deg, #0075EE 0%, #0094BF 50%, #00B095 100%);
  --aiu-gradient-h:    linear-gradient(90deg,  #0075EE 0%, #00B095 100%);
  --aiu-gradient-soft: linear-gradient(135deg, rgba(0,117,238,.08), rgba(0,176,149,.08));

  /* ---- State layers ---------------------------------------------------- */
  --state-hover-light: rgba(0, 22, 59, .04);
  --state-hover-dark:  rgba(255,255,255, .06);
  --state-press:       rgba(0,117,238,.16);
  --focus-ring:        0 0 0 3px rgba(0,117,238,.35);

  /* ---- Feedback colors ------------------------------------------------- */
  --fb-success: #00B095;
  --fb-info:    #0075EE;
  --fb-warn:    #E8A23B;
  --fb-error:   #E8465B;

  /* ---- Radii — "ribbons" ---------------------------------------------- */
  --r-xs:   8px;
  --r-sm:  12px;
  --r-md:  20px;
  --r-lg:  32px;
  --r-xl:  50px;
  --r-full: 999px;

  /* ---- Spacing scale --------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ---- Shadow / elevation --------------------------------------------- */
  --sh-xs: 0 1px 2px rgba(0,22,59,.06);
  --sh-sm: 0 2px 6px rgba(0,22,59,.08);
  --sh-md: 0 8px 20px rgba(0,22,59,.10);
  --sh-lg: 0 16px 40px rgba(0,22,59,.14);
  --sh-glow: 0 10px 32px rgba(0,117,238,.22);

  /* ---- Typography: families ------------------------------------------- */
  --ff-display: 'Poppins', system-ui, -apple-system, Segoe UI, sans-serif;
  --ff-body:    'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --ff-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Typography: weights -------------------------------------------- */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* ---- Typography: scale (desktop default) ---------------------------- */
  --fs-display-xl: 72px;
  --fs-display:    56px;
  --fs-h1:         48px;
  --fs-h2:         36px;
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-lead:       19px;
  --fs-body:       16px;
  --fs-small:      14px;
  --fs-micro:      12px;

  /* ---- Line-heights ---------------------------------------------------- */
  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-body:  1.6;
  --lh-loose: 1.8;

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out:    cubic-bezier(.2,.7,.2,1);
  --ease-spring: cubic-bezier(.2,1.1,.3,1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
}

/* ==========================================================================
   Semantic element styles
   ========================================================================== */

.aiu-display-xl,
.aiu-display,
.aiu-h1, .aiu-h2, .aiu-h3, .aiu-h4 {
  font-family: var(--ff-display);
  color: var(--fg-on-light-1);
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  margin: 0;
}

.aiu-display-xl { font-size: var(--fs-display-xl); font-weight: var(--fw-extrabold); letter-spacing: -0.03em; }
.aiu-display    { font-size: var(--fs-display);    font-weight: var(--fw-extrabold); letter-spacing: -0.03em; }
.aiu-h1         { font-size: var(--fs-h1);         font-weight: var(--fw-extrabold); }
.aiu-h2         { font-size: var(--fs-h2);         font-weight: var(--fw-bold); }
.aiu-h3         { font-size: var(--fs-h3);         font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.aiu-h4         { font-size: var(--fs-h4);         font-weight: var(--fw-semibold); line-height: var(--lh-snug); }

.aiu-lead {
  font-family: var(--ff-body);
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--fg-on-light-2);
}

.aiu-body {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--fg-on-light-1);
}

.aiu-small {
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  line-height: 1.55;
  color: var(--fg-on-light-2);
}

.aiu-micro {
  font-family: var(--ff-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-on-light-2);
}

.aiu-eyebrow {
  font-family: var(--ff-display);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aiu-blue);
}

.aiu-mono {
  font-family: var(--ff-mono);
  font-size: 13px;
}

/* ---- Gradient text -------------------------------------------------- */
.aiu-gradient-text {
  background: var(--aiu-gradient-h);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---- Inverted text on dark surfaces --------------------------------- */
.on-dark.aiu-h1,
.on-dark.aiu-h2,
.on-dark.aiu-h3,
.on-dark.aiu-h4,
.on-dark.aiu-display,
.on-dark.aiu-display-xl,
.on-dark.aiu-body { color: var(--fg-on-dark-1); }
.on-dark.aiu-lead,
.on-dark.aiu-small,
.on-dark.aiu-micro { color: var(--fg-on-dark-2); }