/* =====================================================================
   GOLDEN KEY VPN — DESIGN TOKENS
   Единственный источник правды по цветам, радиусам, типографике, отступам
   и анимации. Никаких «магических» hex-значений в других файлах.
   Ориентир: Apple HIG (Dark Mode). См. docs/IOS_DESIGN_RULES.md
   ===================================================================== */

:root {
  color-scheme: dark;

  /* ---------- 1. ФОНЫ (иерархия яркостью, не тенью) ---------- */
  --bg:            #000000;   /* systemBackground — страница */
  --surface-1:     #1C1C1E;   /* secondarySystemBackground — карточки, группы */
  --surface-2:     #2C2C2E;   /* tertiary — поля, вложенные блоки, pressed */
  --surface-3:     #3A3A3C;   /* elevated — бегунок segmented, hover */
  --surface-sheet: #1C1C1E;   /* шиты и модалки */
  --overlay:       rgba(0, 0, 0, 0.6);   /* затемнение под шитом */

  /* ---------- 2. ТЕКСТ (label) ---------- */
  --label:   #FFFFFF;                     /* основной */
  --label-2: rgba(235, 235, 245, 0.60);   /* вторичный: подписи, описания */
  --label-3: rgba(235, 235, 245, 0.30);   /* третичный: плейсхолдеры, chevron */
  --label-4: rgba(235, 235, 245, 0.18);   /* декоративный */

  /* ---------- 3. ЗАЛИВКИ И РАЗДЕЛИТЕЛИ ---------- */
  --fill-1: rgba(120, 120, 128, 0.36);  /* трек тумблера off, gray-кнопка pressed */
  --fill-2: rgba(120, 120, 128, 0.32);
  --fill-3: rgba(118, 118, 128, 0.24);  /* gray-кнопка, трек segmented, поля */
  --fill-4: rgba(118, 118, 128, 0.18);
  --separator: rgba(84, 84, 88, 0.65);  /* 0.5px линии в списках */
  --hairline:  rgba(255, 255, 255, 0.08); /* верхний блик стекла / тонкая обводка */

  /* ---------- 4. ЖЁЛТОЕ ЗОЛОТО (бренд) ----------
     Цвет снят с рендера маскота (жёлтое золото 18k). Плоская заливка без
     градиентов — строгий дизайн-код. Жёлтый = только главное действие,
     активное состояние и 1–2 акцента на экран. */
  --gold-50:  #FFF9E0;
  --gold-100: #FFF0B3;
  --gold-200: #FFE27A;
  --gold-300: #FFD23F;   /* текст/иконки-акценты на чёрном */
  --gold-400: #FFC414;   /* БРЕНД: заливка primary-кнопок, активные состояния */
  --gold-500: #F0B000;   /* pressed */
  --gold-600: #C48A00;
  --gold-700: #7A5500;
  --gold-900: #2B1E00;

  --gold:          var(--gold-400);
  --gold-hover:    #FFCD38;
  --gold-pressed:  var(--gold-500);
  --gold-text:     var(--gold-300);
  --gold-tint:     rgba(255, 196, 20, 0.14);   /* tinted-кнопки, бейджи, тайлы */
  --gold-tint-2:   rgba(255, 196, 20, 0.22);   /* tinted pressed */
  --gold-glow:     rgba(255, 196, 20, 0.30);
  --on-gold:       #121000;                    /* текст на жёлтом */

  /* ---------- 5. СТАТУСЫ (системные dark) ---------- */
  --green:  #30D158;  --green-tint:  rgba(48, 209, 88, 0.16);
  --red:    #FF453A;  --red-tint:    rgba(255, 69, 58, 0.16);
  --orange: #FF9F0A;  --orange-tint: rgba(255, 159, 10, 0.16);
  --blue:   #0A84FF;  /* не используем как акцент — только системные ссылки при необходимости */

  /* ---------- 6. МАТЕРИАЛЫ (стекло) ---------- */
  --material-chrome:  rgba(18, 18, 20, 0.72);  /* nav bar, tab bar */
  --material-regular: rgba(30, 30, 32, 0.70);
  --material-thin:    rgba(30, 30, 32, 0.45);
  --blur-chrome:  saturate(180%) blur(20px);
  --blur-regular: saturate(180%) blur(30px);

  /* ---------- 7. РАДИУСЫ (continuous corners / squircle) ----------
     Значения — iOS-радиус R. Сглаживание 60% (как в iOS) делает
     assets/js/squircle.js. Без JS — обычный border-radius (фолбэк).
     Правило концентричности: R_inner = R_outer − padding. */
  --r-xs:   6px;    /* бейджи, мелкие чипы */
  --r-sm:   10px;   /* поля ввода, малые кнопки, иконки 29px → 7 */
  --r-md:   14px;   /* кнопки 50px, алерты, тайлы иконок 44px */
  --r-lg:   20px;   /* карточки, группы списков */
  --r-xl:   28px;   /* hero-карточки, bento */
  --r-2xl:  38px;   /* шиты, крупные панели (≈ радиус экрана iPhone) */
  --r-pill: 999px;  /* капсулы: nav-CTA, чипы, segmented */
  --squircle-smoothing: 0.6;

  /* ---------- 8. ОТСТУПЫ (сетка 4/8pt) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px; --s-30: 120px; --s-40: 160px;

  --page-margin: 20px;       /* боковые поля: mobile 20 → tablet 32 → desktop auto */
  --container: 1120px;       /* основная ширина */
  --container-text: 680px;   /* ширина текстовых блоков */
  --container-app: 640px;    /* ширина «приложения» (кабинет, подписка) */
  --tap: 44px;               /* минимальная зона касания */
  --nav-h: 52px;             /* высота верхней навигации */
  --tabbar-h: 62px;          /* плавающая капсула tab bar / dock (как iOS 26) */
  --bar-gap: 12px;           /* отступ капсулы от низа экрана: панель Safari тоже «плавает» */
  --bar-surface: rgba(28, 28, 30, 0.94); /* плотная поверхность капсулы — без «жидкого стекла» */

  /* ---------- 9. ТИПОГРАФИКА ----------
     SF Pro на Apple-устройствах, Inter — везде ещё (метрики близки,
     есть кириллица). Шкала = iOS Dynamic Type + маркетинговые размеры. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Inter", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* size / line-height / letter-spacing / weight */
  --t-display:  clamp(44px, 6.4vw, 84px) / 1.03 var(--font);    /* hero H1 */
  --t-display-ls: -0.035em;
  --t-title-xl: clamp(34px, 4.6vw, 56px) / 1.08 var(--font);    /* H2 секций */
  --t-title-xl-ls: -0.03em;
  --fs-large-title: 34px;  --lh-large-title: 41px;  --ls-large-title: -0.012em;
  --fs-title-1: 28px;      --lh-title-1: 34px;      --ls-title-1: -0.01em;
  --fs-title-2: 22px;      --lh-title-2: 28px;      --ls-title-2: -0.012em;
  --fs-title-3: 20px;      --lh-title-3: 25px;      --ls-title-3: -0.017em;
  --fs-headline: 17px;     --lh-headline: 22px;     --ls-headline: -0.025em;  /* semibold */
  --fs-body: 17px;         --lh-body: 22px;         --ls-body: -0.025em;
  --fs-callout: 16px;      --lh-callout: 21px;      --ls-callout: -0.02em;
  --fs-subhead: 15px;      --lh-subhead: 20px;      --ls-subhead: -0.015em;
  --fs-footnote: 13px;     --lh-footnote: 18px;     --ls-footnote: -0.006em;
  --fs-caption: 12px;      --lh-caption: 16px;      --ls-caption: 0;
  --fs-caption-2: 11px;    --lh-caption-2: 13px;    --ls-caption-2: 0.006em;
  --fs-lead: clamp(19px, 2vw, 23px); --lh-lead: 1.4; /* подзаголовок hero */

  --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --w-heavy: 800;

  /* ---------- 10. АНИМАЦИЯ ---------- */
  --ease-ios:    cubic-bezier(0.32, 0.72, 0, 1);    /* шиты, переходы (≈ critically damped spring) */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);    /* появления */
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --ease-spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
                        0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%,
                        1.001 85.9%, 1);                /* лёгкий overshoot: тумблер, segmented */
  --d-press: 120ms;   /* нажатие */
  --d-fast:  200ms;   /* hover, цвет */
  --d-base:  320ms;   /* тумблер, segmented, accordion */
  --d-sheet: 480ms;   /* шит/модалка */
  --d-reveal: 800ms;  /* появление секций */
  --press-scale: 0.97;      /* кнопки */
  --press-scale-card: 0.985;/* карточки */

  /* ---------- 11. ТЕНИ (на чёрном почти не нужны) ---------- */
  --shadow-sheet: 0 -10px 60px rgba(0, 0, 0, 0.6);
  --focus-ring: 0 0 0 3px rgba(255, 196, 20, 0.55);
}

@media (min-width: 734px)  { :root { --page-margin: 32px; } }
@media (min-width: 1068px) { :root { --page-margin: 40px; --nav-h: 56px; } }