/* ==========================================================================
   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);
}