/* ================================================================
   PICK — tokens.css
   Generated from DESIGN-LOCK.md (2026-08-08).
   Single writer: /tokens skill. Do not edit manually — next run overwrites.
   ================================================================ */

/* ─────────────────────────────────────────────────────────────
   @font-face — self-hosted, unicode subsetting (Google Fonts)
   Instrument Sans = variable font (single .woff2 covers 400-700)
   ───────────────────────────────────────────────────────────── */

/* Instrument Sans · latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/instrument-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Instrument Sans · latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/instrument-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono · latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono · latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono · cyrillic (для /ru/ версии) */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


/* ─────────────────────────────────────────────────────────────
   Design tokens
   ───────────────────────────────────────────────────────────── */

:root {

  /* §1 · Spacing scale — base ×8 rhythm */
  --space-base:      0.5rem;     /*  8px  — атомарная единица */
  --space-1:         0.5rem;     /*  8px  */
  --space-2:         1rem;       /* 16px  */
  --space-3:         1.5rem;     /* 24px  */
  --space-4:         2rem;       /* 32px  */
  --space-6:         3rem;       /* 48px  */
  --space-8:         4rem;       /* 64px  */
  --space-12:        6rem;       /* 96px  */
  --space-16:        8rem;       /* 128px */

  /* §1 · Layout */
  --section-pad-y:   clamp(4rem, 16vw, 6rem);      /* 64→96px  секция top/bottom */
  --page-padding-x:  clamp(1.5rem, 6vw, 3rem);     /* 24→48px  left/right margin */
  --content-max-w:   80rem;                        /* 1280px    desktop container */
  --gutter:          clamp(1rem, 4vw, 2rem);       /* 16→32px  grid gap */


  /* §2 · Type — families */
  --font-sans:       'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-mono:       'JetBrains Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

  /* §2 · Type — weights (МАКСИМУМ 2 на весь сайт) */
  --fw-regular:      400;
  --fw-bold:         700;

  /* §2 · Type — sizes (fluid clamp) */
  --fs-eyebrow:      0.75rem;                                        /* 12px  uppercase tracked */
  --fs-caption:      0.75rem;                                        /* 12px  */
  --fs-source:       0.75rem;                                        /* 12px  mono uppercase */
  --fs-body:         clamp(1rem, 1vw + 0.75rem, 1.0625rem);          /* 16→17 body */
  --fs-body-lg:      clamp(1.125rem, 1.5vw + 0.9rem, 1.25rem);       /* 18→20 hero SUB */
  --fs-h3:           clamp(1.25rem, 1.5vw + 1rem, 1.5rem);           /* 20→24 subsection */
  --fs-h2:           clamp(2rem, 8vw, 3rem);                         /* 32→48 section H */
  --fs-h1:           clamp(2rem, 8vw, 5.5rem);                       /* 32→88 hero H1 */
  --fs-number:       clamp(3rem, 14vw, 7rem);                        /* 48→112 number-band big digit */
  --fs-wordmark:     clamp(2.5rem, 12vw, 4.5rem);                    /* 40→72 PICK wordmark */

  /* §2 · Type — line-heights */
  --lh-display:      1.0;      /* H1 / H2 / Wordmark / Number */
  --lh-h3:           1.15;
  --lh-body:         1.6;      /* editorial reading */
  --lh-caption:      1.4;

  /* §2 · Type — letter-spacing */
  --ls-tight-3:      -0.03em;  /* H1 / Wordmark */
  --ls-tight-2:      -0.02em;  /* H2 */
  --ls-tight-1:      -0.01em;  /* H3 */
  --ls-normal:        0;       /* body */
  --ls-cta:           0.02em;
  --ls-mono:          0.05em;  /* uppercase source labels */
  --ls-eyebrow:       0.08em;  /* uppercase eyebrow */


  /* §3 · Color — mono + one accent (60/30/10) */
  /* Base — warm off-white bg + pure-grey neutrals (не warm-brown, конфликтовало с yellow) */
  --c-bg:            #FAFAF9;                    /* 60% — warm off-white */
  --c-fg:            #080503;                    /* 30% — warm near-black */
  --c-fg-muted:      #737373;                    /* eyebrow / caption / source */
  --c-border:        #E5E5E5;                    /* hairline separators */
  --c-secondary:     #F5F5F5;                    /* alt section bg (блок 08 «For L&D») */
  --c-card:          #FFFFFF;                    /* elevated (редко) */
  --c-overlay:       rgba(8, 5, 3, 0.4);         /* cookie-banner / modal backdrop */

  /* Accent (10%) — единственный акцент */
  --c-accent:        #FFD600;
  --c-accent-fg:     #080503;                    /* contrast на жёлтом 14.2:1 */

  /* Semantic (только для формы) */
  --c-error:         #CC0000;
  /* No --c-success (inline text достаточен) */
  /* No --c-warning (не используем) */


  /* §4 · Radius — ОДНО значение */
  --radius:          0.25rem;  /* 4px */


  /* §5 · Motion — единый ease */
  --ease:            cubic-bezier(0.4, 0, 0.2, 1);
  /* Только linear допустим для infinite loops (marquee) */

  /* §5 · Motion — durations */
  --dur-fast:        200ms;    /* hover / focus / click */
  --dur-base:        400ms;    /* accordion / state change / eyebrow fade */
  --dur-slow:        800ms;    /* section fade-in / H1 SUB reveal */
  --dur-reveal:      800ms;    /* H1 char-in на mount */
  --dur-marquee:      40s;     /* client-marquee full loop */
  --dur-count:      2000ms;    /* number count-up on IntersectionObserver */
  --char-delay:       25ms;    /* per-character delay для H1 char-in */

  /* §5 · Motion — stagger pattern (для cascade reveal) */
  --stagger-step:    200ms;    /* delay между sequential elements в hero */
}


/* ─────────────────────────────────────────────────────────────
   Motion — глобальные keyframes (§5)
   ───────────────────────────────────────────────────────────── */

@keyframes char-in {
  0%   { opacity: 0; filter: blur(40px); transform: translateY(100%); }
  100% { opacity: 1; filter: blur(0);    transform: translateY(0); }
}

@keyframes line-reveal {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0); }
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ─────────────────────────────────────────────────────────────
   Accessibility — prefers-reduced-motion
   Полностью отключает background canvas + все decorative animations
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
    scroll-behavior:      auto !important;
  }
  /* Canvas background — display none (экономит CPU vs opacity 0) */
  .bg-canvas { display: none !important; }
}


/* ─────────────────────────────────────────────────────────────
   Base — apply fg/bg/font-sans to document
   Один writer правило: base html/body применяется здесь потому что
   это — часть design token layer, не компонент.
   ───────────────────────────────────────────────────────────── */

html {
  scroll-behavior: smooth;   /* все CTA → #form smooth scroll */
}

body {
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Global text-wrap rule — no ellipsis anywhere (см. DESIGN-LOCK §1) */
* { text-overflow: clip; }