/*
 * tokens.css — design tokens, re-themed to match the ORIGINAL mindbureau.ai
 * visual style per explicit user instruction ("сделай его в стиле моего,
 * как я тебе просил") — full-dark palette, Syne/Inter typography, values
 * extracted directly from the live production styles.css (fetched and
 * diffed, not guessed). This supersedes the brief's light/dark-alternating
 * §17.2 palette; content/copy/structure are unchanged.
 *
 * Single source of truth for colors, typography, spacing and radius.
 * No raw hex/px values outside this file.
 */

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

:root {
  /* ---- Colors — full-dark palette (old site has no light sections at all) ---- */
  --bg-dark: #07080E;             /* body background (old --bg-0) */
  --card-surface: #0C0E18;        /* card / raised-surface background (old --bg-1) */
  --card-surface-2: #111425;      /* secondary raised surface (old --bg-2) */
  --card-surface-3: #161B2E;      /* tertiary raised surface (old --bg-3) */
  --text-on-dark: #EEEDF0;        /* primary text (old --t-1) */
  --text-on-dark-muted: #8B91AA;  /* muted text (old --t-2) */
  --text-on-dark-subtle: #525775; /* subtlest text (old --t-3) */

  /* ---- Legacy alias names other CSS files reference — repointed to the
     dark palette above since there are no light sections anymore. Kept
     as separate variables (not deleted) to avoid touching every consumer
     file for a same-value rename. ---- */
  --bg-light: #07080E;            /* was a light section bg; now = body bg */
  --surface-white: #EEEDF0;       /* was #FFFFFF; now = light FOREGROUND color
    (used as `color:` for text on the accent button — NOT as a background;
    background/surface uses go through --card-surface instead, see below) */
  --text-on-light: #EEEDF0;
  --text-on-light-muted: #8B91AA;
  --border-light: #1A1E2E;        /* old --bd-1 */
  --border-2: #222840;            /* old --bd-2 */
  --border-3: #2D3350;            /* old --bd-3 */

  /* ---- Accent — exactly one primary accent on the whole site ---- */
  --accent: #5B7CFC;              /* old --a */
  --accent-hover: #7A97FF;        /* old --a-hover */
  --accent-soft: rgba(91, 124, 252, 0.10); /* old --a-dim */
  --accent-border: rgba(91, 124, 252, 0.22); /* old --a-bd */

  /* ---- Status / evidence-signal colors (kept distinct from accent) ---- */
  --status-success: #167A5A;
  --status-warning: #9A6412;
  --status-research: #687386;
  --status-error: #B42318;

  /* ---- Typography — font families (old site: Syne display / Inter body,
     loaded via Google Fonts — see @import above, matches old <link>) ---- */
  --font-display: 'Syne', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* old site has no monospace font; eyebrow/label text uses Inter uppercase+tracked, not mono */

  /* ---- Typography — desktop scale ---- */
  --fs-h1-desktop: 68px;
  --lh-h1-desktop: 1.08;
  --fs-h2-desktop: 48px;
  --lh-h2-desktop: 1.12;
  --fs-h3-desktop: 29px;
  --lh-h3-desktop: 1.2;
  --fs-hero-body-desktop: 21px;
  --lh-hero-body-desktop: 1.5;
  --fs-body-large: 18px;
  --lh-body-large: 1.6;
  --fs-body: 16px;
  --lh-body: 1.6;
  --fs-small: 14px;
  --lh-small: 1.5;
  --fs-eyebrow: 11.2px;   /* old .label: 0.7rem */
  --ls-eyebrow: 0.12em;   /* old .label letter-spacing */

  /* ---- Typography — mobile scale ---- */
  --fs-h1-mobile: 42px;
  --fs-h2-mobile: 34px;
  --fs-h3-mobile: 26px;
  --fs-hero-body-mobile: 19px;
  --fs-body-mobile: 16px;

  /* ---- Typography — weights (Syne display goes bolder than the old
     Geist-based scale — old site used 700/800 for its biggest display
     text; kept slightly lighter here since our H1 is body copy-heavy,
     not a single short headline) ---- */
  --fw-h1: 700;
  --fw-h2: 700;
  --fw-h3: 600;
  --fw-body: 400;
  --fw-body-medium: 500;

  /* ---- Layout ---- */
  --content-max-width: 1200px;
  --side-padding-desktop: 40px;
  --side-padding-desktop-large: 48px;
  --side-padding-tablet: 28px;
  --side-padding-mobile: 20px;
  --section-spacing-desktop: 112px;
  --section-spacing-mobile: 80px;
  --grid-columns: 12;
  --grid-gap: 24px;

  /* ---- Radius (old site: r-1=6px buttons, r-2=12px cards, r-3=20px large) ---- */
  --radius-card: 12px;
  --radius-button: 6px;

  /* ---- Motion (old site: 0.28s, cubic-bezier(0.16,1,0.3,1)) ---- */
  --transition-duration: 280ms;
  --transition-easing: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Buttons ---- */
  --button-height: 50px;

  /* ---- Breakpoints — reference values, applied via literal px in
     media queries.
     Small mobile:  320–479px
     Mobile:        480–767px
     Tablet:        768–1023px
     Desktop:       1024–1279px
     Large desktop: >=1280px
  */
}