/* Токены дизайн-системы СБК. Извлечено из index.html скриптом site-src/extract-assets.mjs. */

:root {
  /* ── Ink (text) ── warm near-blacks, never #000 ── */
  --ink:        #161610;   /* primary text on paper            */
  --ink-soft:   #3a3a30;   /* secondary text, list items       */
  --ink-muted:  #6e6e5e;   /* body copy, descriptions          */
  --ink-faint:  #a8a898;   /* captions, periods, disabled      */

  /* ── Paper (light surfaces) ── aged warm neutrals ── */
  --paper:      #f4f0e8;   /* default page background          */
  --paper-warm: #ede8de;   /* alt warm surface                 */
  --paper-mid:  #ddd6c8;   /* deeper paper, dividers on light  */
  --white:      #ffffff;   /* cards, inputs, clean surfaces    */

  /* ── Forest (brand primary / dark surfaces) ── */
  --forest:      #1b3426;  /* hero, footer, dark sections      */
  --forest-mid:  #2a4e3e;  /* hover dark, secondary forest     */
  --forest-lit:  #3c7056;  /* icons, accents on light, links   */
  --forest-pale: #e6eeea;  /* hover tint on light surfaces     */

  /* ── Gold (brand accent) ── antique brass, not yellow ── */
  --gold:      #876230;    /* CTA fills, accents on light      */
  --gold-lit:  #ae8848;    /* accents on dark, italics, hovers */
  --gold-pale: #f0e2c8;    /* gold tint surfaces, tags         */

  /* ── Borders ── hairlines, always translucent ink ── */
  --border:     rgba(22, 22, 16, .09);  /* hairline on light  */
  --border-mid: rgba(22, 22, 16, .16);  /* structural grid    */

  /* ── Borders on dark ── translucent white ── */
  --border-on-dark:     rgba(255, 255, 255, .07);
  --border-on-dark-mid: rgba(255, 255, 255, .12);

  /* ── Semantic comparison colors (used on dark) ── */
  --pos: #a5d6a7;          /* affirmative / yes / success      */
  --neg: #ef9a9a;          /* negative / no / warning          */

  /* ════════ SEMANTIC ALIASES ════════ */
  --text-primary:    var(--ink);
  --text-secondary:  var(--ink-soft);
  --text-body:       var(--ink-muted);
  --text-faint:      var(--ink-faint);
  --text-on-dark:        rgba(255, 255, 255, .9);
  --text-on-dark-muted:  rgba(255, 255, 255, .52);
  --text-on-dark-faint:  rgba(255, 255, 255, .35);

  --surface-page:    var(--paper);
  --surface-card:    var(--white);
  --surface-dark:    var(--forest);
  --surface-tint:    var(--gold-pale);

  --accent:          var(--gold);
  --accent-hover:    var(--gold-lit);
  --accent-on-dark:  var(--gold-lit);
  --brand:           var(--forest);
  --link:            var(--forest-mid);
}

:root {
  /* ── Families ── */
  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-text:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Semantic aliases */
  --font-serif-display: var(--font-display);
  --font-sans-body:     var(--font-text);

  /* ── Weights ── */
  --fw-light:    300;   /* @kind font */ /* body copy, the default feel */
  --fw-regular:  400;   /* @kind font */
  --fw-medium:   500;   /* @kind font */
  --fw-semibold: 600;   /* @kind font */ /* headings, eyebrows, buttons */
  --fw-bold:     700;   /* @kind font */ /* card titles, big numerals */

  /* ── Display scale (Cormorant) ── tight, editorial ── */
  --text-hero:    72px;   /* hero h1            */
  --text-display: 48px;   /* section titles     */
  --text-stat-xl: 64px;                      /* hero stat numeral  */
  --text-stat-lg: 56px;                      /* band numerals      */
  --text-stat-md: 44px;                      /* pricing numerals   */
  --text-h3:      28px;                       /* card heading       */
  --text-h4:      22px;                       /* sub heading        */

  /* ── Text scale (Manrope) ── */
  --text-lead:  17px;   /* hero/section subtitle (weight 300)   */
  --text-base:  16px;   /* body                                  */
  --text-sm:    15px;   /* card body, inputs                     */
  --text-xs:    14px;   /* list items, nav, buttons              */
  --text-2xs:   13px;   /* meta, periods                         */
  --text-micro: 11px;   /* eyebrows, labels, tags (UPPERCASE)    */

  /* ── Line heights ── */
  --lh-tight:   1.05;   /* @kind font */ /* display headings */
  --lh-snug:    1.2;    /* @kind font */
  --lh-normal:  1.65;   /* @kind font */ /* default body */
  --lh-relaxed: 1.8;    /* @kind font */ /* lead paragraphs */

  /* ── Letter spacing ── */
  --ls-display: 0;  /* tighten large serif                  */
  --ls-eyebrow: 0;   /* eyebrow / label tracking             */
  --ls-tag: 0;   /* tags, small labels                   */
  --ls-button: 0;   /* uppercase buttons                    */
  --ls-nav: 0;
}

:root {
  /* ── Spacing scale (4px base) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-18: 72px;
  --space-22: 88px;
  --space-28: 112px;   /* vertical section rhythm */

  /* ── Semantic spacing ── */
  --section-y:   112px;   /* .sec top/bottom padding   */
  --section-y-sm: 72px;   /* mobile section padding    */
  --card-pad:    44px;    /* card interior padding     */
  --gutter:      48px;    /* page horizontal padding   */

  /* ── Layout ── */
  --container:   1120px;  /* max content width         */
  --header-h:    68px;    /* fixed header height        */

  /* ── Radius ── deliberately minimal, near-square ── */
  --radius-sharp: 2px;    /* buttons, tags, inputs, tiles — the house corner */
  --radius-pip:   50%;    /* dots, round indicators     */
  --radius-none:  0;      /* grid cells, panels         */

  /* ── Borders ── */
  --border-width: 1px;
  --border-cta:   3px;    /* alert top accent           */

  /* ── Shadows ── the system is flat; reserve for overlays only ── */
  --shadow-none: none;
  --shadow-overlay: 0 24px 60px -20px rgba(22, 22, 16, .25);  /* dialogs only */

  /* ── Motion ── quiet, no bounce ── */
  --ease:        ease;    /* @kind other */
  --dur-fast:    .2s;     /* @kind other */ /* color / border transitions */
  --dur-mid:     .25s;    /* @kind other */ /* background fills */
  --transition-color:  color var(--dur-fast) var(--ease);      /* @kind other */
  --transition-bg:     background var(--dur-mid) var(--ease);  /* @kind other */
  --transition-border: border-color var(--dur-fast) var(--ease); /* @kind other */
}