/* GreenCard DV - токены дизайн-системы.
   Два слоя:
   1) базовые (--p-*): палитра и шкалы, их не используют компоненты напрямую;
   2) смысловые (--color-*, --font-*, --hero-* ...): их читают компоненты, их переопределяет скин.
   Значения по умолчанию = скин premium (s4), поэтому страница без data-skin выглядит как s4.
   Скин: design/system/skins/<имя>.css, включается атрибутом <html data-skin="<имя>">. */

/* Inter, свой хостинг (OFL 1.1): вариативный, веса 400-800 одним файлом на набор символов. Источник: Google Fonts, 30.10.2026 */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/inter-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/inter-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/inter-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/inter-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}

:root{
  /* ---------- базовые: палитра ---------- */
  --p-navy-900:#0A2A5E;   /* текст и вторичная кнопка s4 */
  --p-navy-600:#3C5A8A;   /* вторая строка заголовка s4 */
  --p-slate-700:#3A4A66;  /* подзаголовок s4 */
  --p-slate-600:#4A5B78;  /* приглушённый текст s4 */
  --p-gray-300:#DCE3EE;
  --p-gray-200:#E1E6EF;
  --p-gray-100:#EEF1F5;
  --p-gray-50:#F6F8FB;
  --p-gray-25:#FBFCFD;
  --p-white:#FFFFFF;
  --p-flag-red:#B22234;   /* красный флага, он же CTA s4 */
  --p-flag-red-700:#8F1B2A;
  --p-flag-blue:#3C3B6E;  /* синий кантон флага */
  --p-green-700:#1B7F4D;
  --p-green-50:#E8F4EE;
  --p-amber-800:#8A5300;
  --p-amber-50:#FFF6E5;
  --p-red-700:#C0261A;
  --p-red-50:#FDECEA;

  /* ---------- базовые: шкалы ---------- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-7:28px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;

  --text-xs:12px; --text-sm:13px; --text-md:14px; --text-base:16px; --text-lg:18px;
  --text-xl:22px; --text-2xl:26px; --text-3xl:36px; --text-4xl:46px;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800;

  --radius-xs:3px; --radius-sm:8px; --radius-md:10px; --radius-lg:12px; --radius-xl:24px; --radius-pill:999px;

  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;
  --ease-out:cubic-bezier(.2,.7,.2,1);

  --tap-min:44px;          /* минимальная зона нажатия */
  --input-font:16px;       /* меньше 16 px - iOS увеличивает страницу при вводе */

  /* ---------- смысловые: цвет ---------- */
  --color-bg:var(--p-white);
  --color-surface:var(--p-gray-25);        /* полосы-секции (шаги) */
  --color-surface-2:var(--p-gray-50);      /* чипы, мягкие плашки */
  --color-elevated:var(--p-white);         /* карточки, поля, бейдж на арте */
  --color-text:var(--p-navy-900);
  --color-text-2:var(--p-slate-700);       /* абзацы под заголовком */
  --color-muted:var(--p-slate-600);
  --color-heading-2:var(--p-navy-600);     /* вторая строка H1 */
  --color-border:var(--p-gray-100);        /* разделители секций */
  --color-border-strong:var(--p-gray-200); /* обводка чипов и полей */
  --color-rail:var(--p-gray-300);          /* линия между шагами */
  --color-field-border:#8592A8;           /* граница поля и карточки-радио: от 3:1 к фону (WCAG 1.4.11) */

  --color-primary:var(--p-flag-red);       /* только главное действие */
  --color-primary-press:var(--p-flag-red-700);
  --color-on-primary:var(--p-white);
  --color-primary-glow:rgba(178,34,52,.22);
  --color-secondary:var(--p-navy-900);     /* вторичное действие, кнопка в шапке, номера шагов */
  --color-on-secondary:var(--p-white);
  --color-accent:var(--p-slate-600);       /* надзаголовок (eyebrow) */
  --color-accent-bg:transparent;           /* плашка под надзаголовком (s1) */
  --color-on-accent-bg:var(--color-accent);
  --color-focus:var(--p-navy-900);

  --color-success:var(--p-green-700);
  --color-success-bg:var(--p-green-50);
  --color-warn:var(--p-amber-800);
  --color-warn-bg:var(--p-amber-50);
  --color-danger:var(--p-red-700);
  --color-danger-bg:var(--p-red-50);

  --flag-red:var(--p-flag-red); --flag-white:var(--p-white); --flag-blue:var(--p-flag-blue);

  /* ---------- смысловые: шрифт ---------- */
  --font-sans:'Inter',Arial,sans-serif;
  --font-display:var(--font-sans);         /* H1, логотип-текст, номера шагов */
  --font-ui:var(--font-sans);              /* кнопки, навигация */
  --font-mono:ui-monospace,Menlo,monospace;
  --display-weight:var(--fw-black);
  --display-case:none;
  --display-tracking:-.02em;
  --display-leading:1.06;
  --h1-size:var(--text-4xl);
  --h1-size-m:var(--text-3xl);
  --h1-2-size:1em;                         /* размер второй строки H1 относительно первой */
  --h1-fill:none;                          /* градиентная заливка заголовка (s2), иначе none */
  --h1-2-fill:none;
  --h1-shadow:none;
  --ui-case:none; --ui-tracking:normal; --ui-weight:var(--fw-semibold);
  --nav-case:none; --nav-tracking:normal; --nav-weight:var(--fw-medium); --nav-color:var(--color-text); --nav-opacity:1;
  --eyebrow-tracking:.1em; --eyebrow-weight:var(--fw-semibold); --eyebrow-pad:0;
  --brand-tracking:.02em; --brand-weight:var(--fw-black); --brand-color:var(--color-text); --brand-case:none;

  /* ---------- смысловые: форма и глубина ---------- */
  --radius-btn:var(--radius-md);
  --radius-btn-nav:var(--radius-sm);
  --radius-card:var(--radius-lg);
  --radius-field:var(--radius-lg);
  --radius-chip:var(--radius-pill);
  --radius-art:var(--radius-xl);
  --shadow-primary:0 8px 20px var(--color-primary-glow);
  --shadow-art:0 30px 60px rgba(10,42,94,.18);
  --shadow-badge:0 8px 24px rgba(10,42,94,.15);
  --shadow-card:0 1px 2px rgba(10,42,94,.06);
  --border-ghost:1.5px solid var(--color-secondary);

  /* ---------- смысловые: первый экран (арт скина) ---------- */
  --page-gutter:64px;           /* боковые поля на десктопе */
  --page-gutter-m:20px;
  --header-pad-y:22px; --header-pad-y-m:16px;
  --header-border:1px solid var(--color-border);
  --header-bg:transparent;
  --fs-bg:var(--color-bg);      /* фон всего первого экрана */
  --fs-min-h:0;                 /* 100vh у постерных скинов */
  --hero-cols:1.05fr 1fr;       /* текст | арт */
  --hero-pad:30px var(--page-gutter) 20px;
  --hero-min-h:calc(100vh - 330px);
  --copy-max:none;
  --art-image:url(/static/img/posters/home.jpg);
  --art-pos:72% center;
  --art-pos-m:72% center;
  --art-mode:frame;             /* справочно: frame | poster */
  --art-position:relative;      /* frame: в колонке; poster: absolute на весь экран */
  --art-ratio:4/3;
  --art-bg:var(--color-border);
  --art-overlay:none;           /* затемнение поверх постера */
  --art-overlay-m:none;
  --art-texture:none;           /* зерно (s1) */
  --art-badge-display:block;
  --tri-display:block;          /* полоска-флаг над надзаголовком */
  --steps-bg:var(--color-surface);
  --steps-border:1px solid var(--color-border);
  --steps-pad:26px var(--page-gutter) 34px;
  --steps-counter:decimal;      /* decimal | decimal-leading-zero | upper-roman */
  --step-num-size:15px;
  --step-num-color:var(--color-on-secondary);
  --step-num-bg:var(--color-secondary);
  --step-num-box:40px;          /* круг; 0 - номер без круга */
  --step-card-bg:transparent;
  --step-card-border:0;
  --step-card-pad:0;
  --steps-rail-display:block;
  --footer-bg:transparent;
  --footer-color:var(--color-muted);
}