/**
 * GRO Design Tokens — Single Source of Truth
 *
 * Источник: design_handoff_checkout/src/assets/colors_and_type.css (Cloud Design).
 * Единые токены для всех страниц проекта: Pillar, Solution, Checkout, Landing.
 *
 * PROTECTED — если меняешь цвет/размер:
 *   1. Меняй ЗДЕСЬ (single point)
 *   2. Не дублируй в других CSS файлах
 *   3. Не возвращай `--text_001: #000` (это legacy, теперь #303030 везде)
 *
 * Enqueued через mu-plugin gro-tokens-enqueue.php с приоритетом ПОСЛЕ style.css,
 * чтобы перекрывать legacy declarations.
 *
 * Last updated: 2026-05-30
 */

:root {
  /* ================ COLORS ================ */

  /* Primary brand & text */
  --main:        #D9B648;
  --text_001:    #303030;   /* primary text — заменяет legacy #000 */
  --text_002:    #525252;   /* secondary text — заменяет #555555 */
  --text_003:    #AAA8A8;   /* muted/captions — заменяет #a9a9a9 */

  /* Backgrounds */
  --bg:          #E9E8E4;   /* page background */
  --bg-00:       #F4F3F0;   /* card subtle */
  --bg-01:       #E7E5DF;   /* hover/active surface */
  --bg-02:       #DEDBD3;   /* divider surface */

  /* Borders */
  --border:      #C4C2BC;
  --border-02:   #D2D0CB;

  /* Accents */
  --extra_bg:    #E8D491;   /* hero / paywall yellow card */
  --green:       #A0E870;   /* success badge */
  --soft-green:  #DEF2ED;   /* success bg subtle */
  --error:       #F2454D;   /* errors — заменяет legacy #cb272f */
  --pink:        #e2a7e4;
  --blue:        #a0e1e1;
  --yellow:      #D9B648;   /* alias for --main */
  --red:         #F2454D;   /* alias for --error */

  /* Light mode aliases (for legacy code) — point to same base values */
  --light-mode-text-001: var(--text_001);
  --light-mode-text-002: var(--text_002);
  --light-mode-text-003: var(--text_003);
  --light-mode-border:   var(--border);
  --light-mode-border-02: var(--border-02);
  --light-mode-bg-00:    var(--bg-00);
  --light-mode-bg-01:    var(--bg);
  --light-mode-bg-02:    var(--bg-02);
  --light-mode-bg-03:    var(--bg-01);
  --light-mode-white:    #fff;

  /* Dark mode tokens (for Pillar dark mode toggle) */
  --dark-mode-black:     #000;
  --dark-mode-text-001:  #fff;
  --dark-mode-text-002:  #afafaf;
  --dark-mode-text-003:  #666;
  --dark-mode-border:    #3d3d3d;

  /* ================ TYPOGRAPHY ================ */
  --font-family-base: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Sizes — desktop / mobile pairs */
  --fs-72:  72px; --fs-72-m:  40px;
  --fs-56:  56px; --fs-56-m:  32px;
  --fs-46:  46px;
  --fs-40:  40px;
  --fs-36:  36px; --fs-36-m:  24px;
  --fs-32:  32px; --fs-32-m:  20px;
  --fs-30:  30px;
  --fs-28:  28px; --fs-28-m:  20px;
  --fs-24:  24px; --fs-24-m:  18px;
  --fs-20:  20px; --fs-20-m:  16px;
  --fs-18:  18px;
  --fs-16:  16px; --fs-16-m:  14px;
  --fs-14:  14px; --fs-14-m:  12px;
  --fs-12:  12px; --fs-12-m:  10px;

  /* Line heights */
  --lh-display:  0.98;
  --lh-heading:  1.12;
  --lh-snug:     1.28;
  --lh-base:     1.40;

  /* Tracking */
  --tracking-tight: -0.04em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;

  /* ================ GEOMETRY ================ */
  --container-width:     1920px;
  --container-padding-x:   32px;
  --section-padding-y:     30px;

  /* Buttons */
  --button-h-small:    36px;
  --button-h-medium:   44px;
  --button-h-large:    56px;
  --button-h-super:    72px;
  --button-height:     40px;  /* legacy alias */

  /* Inputs */
  --input-h:           44px;
  --input-height:      38px;  /* legacy alias */

  /* Spacing (8pt grid) */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  48px;
  --space-9:  56px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* Breakpoints */
  --breakpoint-mobile:  390px;
  --breakpoint-tablet:  768px;
  --breakpoint-desktop: 1440px;
  --breakpoint-wide:    1920px;

  /* Radius */
  --radius-tag:     20px;
  --radius-soft:    16px;
  --radius-card:    24px;
  --radius-chip:    40px;
  --radius-nav:     46px;
  --radius-pill:   500px;

  /* Shadow */
  --shadow-pop:    0 12px 32px rgba(0, 0, 0, 0.08);

  /* Transitions */
  --transition:           0.2s;
  --transition-duration:  0.2s;  /* legacy alias */

  /* Misc legacy */
  --paragraphMarginBottom: 24px;
}