/* MLinside — design tokens (сборка из colors / typography / spacing / effects). Не редактируйте для правки контента — переменные курса в course-config.js. */
/* ==========================================================================
   MLinside — Color tokens
   Sourced from the two live Tilda pages (mlinside.ru/, /system-design):
   near-black / deep-navy dark theme with a single lime-green accent.
   ========================================================================== */
:root {
  /* ---- Base neutrals (dark theme is the ONLY theme in the source) ---- */
  --black-1: #0d0d0d;   /* primary page background (Base ML page) */
  --black-2: #151719;   /* alt panel background */
  --navy-1:  #03002f;   /* hero / video-section background (System Design page) */
  --navy-2:  #0e121e;   /* tooltip / menu popover background */
  --navy-3:  #0f0d3b;   /* secondary hero panel */
  --ink-1:   #131313;   /* card background, System Design page */
  --ink-2:   #1a1a1a;   /* alt dark surface */
  --ink-3:   #202020;

  --white:      #ffffff;
  --gray-1:     #cfcfcf;  /* secondary/muted text on dark */
  --gray-2:     #9a9a9a;
  --gray-3:     #c5c5c5;

  /* ---- Brand accent: lime green ---- */
  --lime-1: #ceff8b;   /* primary accent — CTAs, active nav pill, links */
  --lime-2: #cdfd8b;   /* near-duplicate, used interchangeably in source */
  --lime-3: #c0ff6a;   /* icon fills */
  --lime-4: #b0ff45;   /* saturated variant, small accents */
  --lime-hover-solid: #9cca5d;  /* hover bg for solid lime buttons (darker) */
  --lime-hover-outline: #91b75d; /* hover text/border for outline lime buttons */

  /* ---- Secondary structural accents ---- */
  --violet-border: #2d2a63; /* 1px border on glass cards over navy hero */

  /* ---- Brand accent 2: magenta (promoted to a standing secondary accent) ----
     Formerly a rare decorative tag; now the fixed counterpart to lime. Used to
     mark the "solution / engineering / Как?" side of compare-contrast content,
     while lime marks the "problem / product / Зачем?" side (see --accent-problem
     / --accent-solution below and the Slides subsystem). */
  --magenta-1: #d26def;   /* primary magenta accent — solution-space labels, thin borders, icon fills */
  --magenta-2: #c85fe6;   /* deeper magenta — hover / pressed */
  --magenta-accent: var(--magenta-1); /* legacy alias, kept for existing one-off usages */

  /* ---- Section-glow blue (background-only accent) ----
     Never used for text or solid fills — only as a soft background glow behind
     title / section-divider slides and hero panels (see --glow-blue-section). */
  --blue-glow: #2850be;

  /* ---- Export-safe opaque equivalents of the glass surfaces ----
     PPTX export flattens rgba() fills to SOLID WHITE. These are the same
     tints precomputed over --black-1 (#0d0d0d). Use these — not rgba() —
     for any surface or border that may be exported. See readme.md →
     "Export-safe rules (PPTX)". */
  --surface-glass-1: #151515;  /* = rgba(255,255,255,0.03) over #0d0d0d */
  --surface-glass-2: #171717;  /* = rgba(255,255,255,0.04) */
  --surface-glass-3: #191919;  /* = rgba(255,255,255,0.05) — default glass card */
  --hairline-1:      #2b2b2b;  /* = rgba(255,255,255,0.09) */
  --hairline-2:      #333333;  /* = rgba(255,255,255,0.12) */
  --hairline-3:      #363636;  /* = rgba(255,255,255,0.14) */

  /* ---- Semantic aliases ---- */
  --bg-page: var(--black-1);
  --bg-page-alt: var(--navy-1);
  --bg-surface: var(--ink-1);
  --bg-surface-glass: var(--surface-glass-3);
  --border-glass: var(--violet-border);
  --border-hairline: var(--hairline-1);

  --text-primary: var(--white);
  --text-secondary: var(--gray-1);
  --text-on-accent: #000000;

  --accent-primary: var(--lime-1);
  --accent-primary-hover: var(--lime-hover-solid);
  --accent-outline-hover: var(--lime-hover-outline);

  /* Secondary accent (magenta) */
  --accent-secondary: var(--magenta-1);
  --accent-secondary-hover: var(--magenta-2);

  /* Problem / Solution semantic pairing — a two-accent code for compare-contrast
     content: lime = problem space (product, «Зачем?/Что?»),
     magenta = solution space (engineering, «Как?»). */
  --accent-problem: var(--lime-1);
  --accent-solution: var(--magenta-1);

  --link-color: var(--lime-1);
  --link-color-hover: var(--lime-hover-outline);
}

/* ==========================================================================
   MLinside — Typography
   Single font: Inter (variable, weights 100–900 + italic) — matches the
     site's `--t-text-font` (Inter 400/500 body & nav) and is also used for
     all headlines and all slide type. No separate display face.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Inter-Variable.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Inter-Italic-Variable.woff2') format('woff2-variations');
}

:root {
  /* Font families — Inter only; --font-display is an alias kept for
     backwards compatibility with existing components. */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: var(--font-body);

  /* Type scale (px, desktop) */
  --text-display-xl: 800 96px/0.95 var(--font-display);   /* hero, e.g. big gradient headline */
  --text-display-lg: 700 48px/1.1 var(--font-display);    /* section H1, uppercase */
  --text-display-md: 700 34px/1.15 var(--font-display);   /* card headline, uppercase */
  --text-display-sm: 600 20px/1.2 var(--font-display);    /* small uppercase kicker headline */

  --text-body-lg: 400 17px/1.5 var(--font-body);
  --text-body-md: 400 15px/1.5 var(--font-body);
  --text-body-sm: 400 13px/1.4 var(--font-body);
  --text-caption: 400 11px/1 var(--font-body);

  --text-nav: 500 18px/1.2 var(--font-body);
  --text-button: 500 16px/1 var(--font-body);

  /* ---- Slide type scale — THE STANDARD for 1920×1080 decks ----
     One token per text role. NEVER hand-pick a slide font-size: every piece of
     slide text uses one of these verbatim. If a headline does not fit, step
     DOWN exactly one rung (title→h1→h2→h3) — never invent an in-between value,
     and never scale up. Distilled from the ML System Design lecture deck.
     See readme.md → "Slide type standard". */
  --text-slide-numeral: 700 320px/1 var(--font-display);   /* ghost decorative section number */
  --text-slide-title:   700 96px/1.0 var(--font-display);  /* title-slide headline ONLY */
  --text-slide-h1:      700 72px/1.05 var(--font-display); /* section-divider headline */
  --text-slide-h2:      700 44px/1.1 var(--font-display);  /* content-slide title, column title */
  --text-slide-h3:      700 32px/1.15 var(--font-display); /* card / diagram label inside a slide */
  --text-slide-lead:    400 34px/1.35 var(--font-body);    /* deck / subtitle under a title */
  --text-slide-body:    400 30px/1.4 var(--font-body);     /* body copy */
  --text-slide-kicker:  500 24px/1.2 var(--font-body);     /* eyebrow above a headline (uppercase) */
  --text-slide-caption: 500 22px/1 var(--font-body);       /* role label / caption */

  /* Letter spacing */
  --tracking-display: -0.02em;   /* tight, matches source's -3px on 48px headlines */
  --tracking-caps: 0.04em;       /* small uppercase labels/kickers */
  --tracking-normal: 0;
}

/* ==========================================================================
   MLinside — Spacing, radius & layout tokens
   Values distilled from the source pages' inline artboard positioning
   (1200px desktop container, 15-70px section gutters, 10-30px component gaps).
   ========================================================================== */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 70px;   /* observed section side gutter on 1200px container */
  --space-11: 122px;  /* observed large section vertical padding */

  --container-max: 1200px;
  --container-pad: 70px;

  /* ---- Corner radii ---- */
  --radius-none: 0px;
  --radius-sm: 10px;   /* header bar, small chips */
  --radius-md: 15px;   /* glass benefit/pricing cards */
  --radius-lg: 24px;
  --radius-pill: 999px; /* buttons, stream badge, nav-active pill */

  /* ---- Border widths ---- */
  --border-width-hairline: 1px;
}

/* ==========================================================================
   MLinside — Effects: blur, glow, gradients, transitions
   ========================================================================== */
:root {
  /* ---- Glassmorphism (benefit cards, pricing cards over navy hero) ----
     SCREEN-ONLY. --glass-blur/--glass-bg do not survive PPTX export (rgba
     flattens to white, backdrop-filter is dropped). For anything exportable
     use the opaque --surface-glass-* tokens and no backdrop-filter. */
  --glass-blur: blur(14px); /* @kind other */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: 1px solid var(--violet-border);

  /* ---- Decorative accent glow (blurred lime circle behind numerals/icons) ----
     SCREEN-ONLY: these gradients + --glow-blur render as flat solid circles in
     PPTX export. For slides / anything exported, use the PNG glows in
     assets/glows/ (glow-{lime|magenta}-{tl|tr|bl|br|center}.png) instead. */
  --glow-lime: radial-gradient(circle, rgba(192, 255, 106, 0.6) 0%, rgba(206, 255, 139, 0.3) 100%); /* @kind other */
  /* Magenta counterpart to --glow-lime (solution-space numerals/icons/personas) */
  --glow-magenta: radial-gradient(circle, rgba(210, 109, 239, 0.6) 0%, rgba(210, 109, 239, 0.28) 100%); /* @kind other */
  --glow-blur: blur(25px); /* @kind other */

  /* ---- Blue section glow (background wash behind title / section-divider slides) ----
     Soft radial wash ~28% at the anchor fading to 0; layered over --black-1,
     kept out from under body copy. Color = --blue-glow. */
  --glow-blue-section: radial-gradient(60% 55% at 50% 0%, rgba(40, 80, 190, 0.28) 0%, rgba(40, 80, 190, 0) 62%); /* @kind other */

  /* ---- Gradient text (headline treatment used throughout both pages) ---- */
  --gradient-text-hero: linear-gradient(100deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%);
  --gradient-text-muted: linear-gradient(100deg, rgba(237,237,237,0.85) 0%, rgba(96,96,96,1) 100%);
  --gradient-text-card: linear-gradient(100deg, rgba(255,255,255,1) 0%, rgba(203,203,203,1) 100%);

  /* ---- Overlay fades (used to fade video/hero art into background color) ---- */
  --fade-to-page: linear-gradient(0deg, var(--black-1) 0%, rgba(13,13,13,0) 100%);
  --fade-to-navy: linear-gradient(0deg, var(--navy-1) 0%, rgba(3,0,47,0) 100%);

  /* ---- Beveled accent shape (alternative to the pill) ----
     Rectangle with two opposite corners cut at 45° — top-left & bottom-right. */
  --bevel-cut: 16px; /* @kind other */
  --shape-bevel: polygon(var(--bevel-cut) 0, 100% 0, 100% calc(100% - var(--bevel-cut)), calc(100% - var(--bevel-cut)) 100%, 0 100%, 0 var(--bevel-cut)); /* @kind other */

  /* ---- Motion ---- */
  --ease-standard: ease-in-out; /* @kind other */
  --duration-fast: 0.15s; /* @kind other */
  --duration-base: 0.2s; /* @kind other */
  --duration-slow: 0.3s; /* @kind other */
  --transition-interactive: background-color var(--duration-base) var(--ease-standard),
                            color var(--duration-base) var(--ease-standard),
                            border-color var(--duration-base) var(--ease-standard),
                            box-shadow var(--duration-base) var(--ease-standard);
}