/* ============================================================
   ИИнфа — Foundations: Color + Type
   Portal into the world of AI · портал в мИИр ИИ
   ============================================================
   Шрифты самохостятся — см. assets/fonts/fonts.css (woff2,
   кириллица + латиница). Подключается из index.html ПЕРЕД этим файлом.
   Никаких внешних зависимостей от Google Fonts в рантайме.
   ============================================================ */

/* (Google Fonts @import удалён — шрифты грузятся локально из assets/fonts/) */

:root {
  /* ---- Brand: Portal Blue scale (primary) ---- */
  --portal-50:  #EAF3FE;
  --portal-100: #D6EAFF;
  --portal-200: #AFD3FB;
  --portal-300: #88BAF6;
  --portal-400: #5E9CF0;
  --portal-500: #2D7DF0;   /* PRIMARY — buttons, links, mark */
  --portal-600: #1C63D6;
  --portal-700: #164FB0;
  --portal-800: #143F88;
  --portal-900: #102C5C;

  /* ---- Accent: Portal Glow (the luminous neon / light beam) ---- */
  --glow-cyan:  #6CC6FF;
  --glow-ice:   #C9E6FF;
  --glow-white: #EAF6FF;
  --accent-aqua:#4FC3F7;

  /* ---- Neutrals: cool navy → ice (frame glass + ink) ---- */
  --ink-900: #0C1B2E;   /* primary text */
  --ink-800: #15263C;
  --ink-700: #2B3B50;   /* strong body */
  --ink-600: #44546C;
  --ink-500: #5B6B82;   /* secondary text */
  --ink-400: #8A97A8;   /* muted / placeholder */
  --ink-300: #BFC8D6;   /* disabled / hairlines on dark */
  --ink-200: #DCE3EE;   /* borders */
  --ink-100: #EDF1F8;   /* subtle fills */
  --ink-50:  #F6F9FD;   /* app background */
  --white:   #FFFFFF;

  /* ---- Semantic ---- */
  --success: #1FA971;
  --success-bg: #E5F6EF;
  --warning: #E8A317;
  --warning-bg: #FBF1DC;
  --danger:  #E5484D;
  --danger-bg: #FCE9E9;
  --info:    var(--portal-500);

  /* ---- Semantic surface roles ---- */
  --bg-app:        var(--ink-50);
  --bg-surface:    var(--white);
  --bg-elevated:   var(--white);
  --bg-sunken:     var(--ink-100);
  --fg-1:          var(--ink-900);   /* primary text */
  --fg-2:          var(--ink-500);   /* secondary text */
  --fg-3:          var(--ink-400);   /* muted text */
  --fg-brand:      var(--portal-600);
  --fg-on-brand:   var(--white);
  --border-1:      var(--ink-200);
  --border-2:      var(--ink-300);
  --ring:          var(--portal-400);

  /* ---- Signature gradients ---- */
  --grad-portal:   linear-gradient(135deg, #2D7DF0 0%, #6CC6FF 100%); /* @kind color */
  --grad-mark:     linear-gradient(135deg, #4E8EE4 0%, #9DCAFD 55%, #C9E6FF 100%); /* @kind color */
  --grad-ice:      linear-gradient(180deg, #FFFFFF 0%, #EAF3FE 100%); /* @kind color */
  --grad-beam:     radial-gradient(120% 80% at 50% 0%, #EAF6FF 0%, #D6EAFF 35%, rgba(214,234,255,0) 70%); /* @kind color */
  --grad-deep:     linear-gradient(165deg, #102C5C 0%, #164FB0 55%, #2D7DF0 100%); /* @kind color */

  /* ---- Typography families ---- */
  --font-display: 'Unbounded', 'Manrope', system-ui, sans-serif; /* geometric, futuristic */
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ---- Type scale (fluid-ish, fixed here) ---- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  84px;

  /* ---- Radii ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 40px;
  --r-full: 999px;

  /* ---- Spacing (4pt base) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* ---- Elevation: soft, cool-blue tinted shadows (glassy) ---- */
  --shadow-xs: 0 1px 2px rgba(16,44,92,0.06);
  --shadow-sm: 0 2px 8px rgba(16,44,92,0.07);
  --shadow-md: 0 8px 24px rgba(16,44,92,0.10);
  --shadow-lg: 0 18px 48px rgba(16,44,92,0.14);
  --shadow-glow: 0 8px 32px rgba(45,125,240,0.30);
  --shadow-inset-glow: inset 0 1px 0 rgba(255,255,255,0.7);

  /* ---- Glass effect tokens ---- */
  --glass-bg: rgba(255,255,255,0.62);
  --glass-border: rgba(255,255,255,0.8);
  --glass-blur: 18px;
}

/* ============================================================
   Semantic element styles — apply via class on any project
   ============================================================ */

.ii-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  line-height: 1.02;
}

h1, .ii-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}

h2, .ii-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}

h3, .ii-h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

h4, .ii-h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.25;
  color: var(--fg-1);
}

.ii-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--portal-600);
}

p, .ii-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink-700);
}

.ii-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--ink-600);
}

.ii-small {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-2);
}

code, .ii-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--ink-100);
  color: var(--portal-700);
  padding: 0.12em 0.4em;
  border-radius: var(--r-xs);
}

a, .ii-link { color: var(--portal-600); text-decoration: none; }
a:hover, .ii-link:hover { color: var(--portal-700); text-decoration: underline; }

/* Gradient text helper (use on display headings sparingly) */
.ii-grad-text {
  background: var(--grad-portal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}