/* ============================================================
   VABO VPN — дизайн-токены
   Единственное место, где объявляются цвета, размеры и движение.
   Компоненты обращаются только к семантическим именам (--bg, --text,
   --accent …), к сырым значениям — никогда.

   Два измерения:
     палитра  — html[data-palette="emerald" | "indigo"], по умолчанию emerald
     тема     — html[data-theme="light" | "dark"] + prefers-color-scheme
   ============================================================ */

@layer tokens {

  /* ── Не зависит от темы ─────────────────────────────────── */
  :root {
    /* Шкала отступов, шаг 4px */
    --space-0: 0;
    --space-1: 0.25rem;   /*  4 */
    --space-2: 0.5rem;    /*  8 */
    --space-3: 0.75rem;   /* 12 */
    --space-4: 1rem;      /* 16 */
    --space-5: 1.5rem;    /* 24 */
    --space-6: 2rem;      /* 32 */
    --space-7: 3rem;      /* 48 */
    --space-8: 4rem;      /* 64 */
    --space-9: 6rem;      /* 96 */

    /* Радиусы */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* Типографика — fluid, от 360px до 1280px */
    --font-sans: "Inter var", "Inter", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

    --text-xs:   clamp(0.75rem,  0.73rem + 0.11vw, 0.8125rem);
    --text-sm:   clamp(0.8125rem, 0.78rem + 0.17vw, 0.875rem);
    --text-base: clamp(0.9375rem, 0.91rem + 0.17vw, 1rem);
    --text-md:   clamp(1rem,     0.96rem + 0.22vw, 1.125rem);
    --text-lg:   clamp(1.125rem, 1.05rem + 0.37vw, 1.375rem);
    --text-xl:   clamp(1.375rem, 1.23rem + 0.70vw, 1.875rem);
    --text-2xl:  clamp(1.75rem,  1.45rem + 1.46vw, 2.75rem);
    --text-3xl:  clamp(2.25rem,  1.70rem + 2.65vw, 4rem);

    --leading-tight: 1.15;
    --leading-snug:  1.35;
    --leading-base:  1.6;

    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* Слои */
    --z-base:    0;
    --z-raised:  10;
    --z-sticky:  100;
    --z-overlay: 500;
    --z-modal:   1000;
    --z-toast:   1500;

    /* Движение */
    --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 400ms;

    /* Раскладка */
    --container: 1120px;
    --container-narrow: 760px;
    --gutter: clamp(1rem, 0.5rem + 2.2vw, 2rem);
    --header-h: 64px;

    /* Минимальная зона нажатия, WCAG 2.2 AA (2.5.8) */
    --tap-min: 44px;
  }

  /* ========================================================
     ПАЛИТРА INDIGO — тёмная тема. Выбрана владельцем 2026-10-03,
     применяется по умолчанию.
     Нейтральный сине-графитовый фон, холодный акцент.
     Ни «зелёного кода», ни «хакерской» эстетики.
     ======================================================== */
  :root,
  :root[data-palette="indigo"] {
    color-scheme: dark;

    --bg:             oklch(17%   0.018 265);
    --bg-subtle:      oklch(20%   0.022 265);
    --surface:        oklch(22.5% 0.026 265);
    --surface-2:      oklch(26%   0.030 265);
    --border:         oklch(31%   0.030 265);
    --border-strong:  oklch(40%   0.040 265);

    --text:           oklch(97%   0.006 265);
    --text-muted:     oklch(80%   0.022 265);
    --text-faint:     oklch(66%   0.024 265);

    /* --accent — заливка; на ней всегда --accent-contrast.
       --accent-text — тот же цвет, пригодный как текст на --bg. */
    --accent:          oklch(74%   0.135 262);
    --accent-hover:    oklch(80%   0.120 262);
    --accent-contrast: oklch(18%   0.040 265);
    --accent-text:     oklch(80%   0.125 262);
    --accent-soft:     oklch(74% 0.135 262 / 0.14);
    --accent-ring:     oklch(74% 0.135 262 / 0.40);

    --success:         oklch(76%   0.145 158);
    --success-text:    oklch(80%   0.135 158);
    --danger:          oklch(64%   0.185  25);
    --danger-text:     oklch(74%   0.155  25);
    --warning:         oklch(78%   0.140  75);
    --warning-text:    oklch(82%   0.125  75);

    --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.40);
    --shadow-md: 0 4px 16px oklch(0% 0 0 / 0.45);
    --shadow-lg: 0 16px 48px oklch(0% 0 0 / 0.55);
    --glow: 0 0 60px oklch(74% 0.135 262 / 0.18);
  }

  /* INDIGO — светлая тема */
  :root[data-theme="light"],
  :root[data-palette="indigo"][data-theme="light"] {
    color-scheme: light;

    --bg:             oklch(99%   0.004 265);
    --bg-subtle:      oklch(97%   0.008 265);
    --surface:        oklch(100%  0     0);
    --surface-2:      oklch(96.5% 0.012 265);
    --border:         oklch(90%   0.016 265);
    --border-strong:  oklch(80%   0.026 265);

    --text:           oklch(23%   0.028 265);
    --text-muted:     oklch(44%   0.030 265);
    --text-faint:     oklch(51%   0.028 265);

    --accent:          oklch(50%   0.175 266);
    --accent-hover:    oklch(44%   0.175 266);
    --accent-contrast: oklch(99%   0.005 265);
    --accent-text:     oklch(46%   0.175 266);
    --accent-soft:     oklch(50% 0.175 266 / 0.10);
    --accent-ring:     oklch(50% 0.175 266 / 0.40);

    --success:         oklch(50%   0.130 158);
    --success-text:    oklch(44%   0.125 158);
    --danger:          oklch(53%   0.200  25);
    --danger-text:     oklch(48%   0.195  25);
    --warning:         oklch(60%   0.140  65);
    --warning-text:    oklch(48%   0.130  65);

    --shadow-sm: 0 1px 2px oklch(23% 0.03 265 / 0.08);
    --shadow-md: 0 4px 16px oklch(23% 0.03 265 / 0.10);
    --shadow-lg: 0 16px 48px oklch(23% 0.03 265 / 0.12);
    --glow: 0 0 60px oklch(50% 0.175 266 / 0.10);
  }

  /* ========================================================
     ПАЛИТРА EMERALD — тёмная тема.
     Прежний фирменный зелёный с выправленными контрастами.
     Оставлена рабочей: включается data-palette="emerald" на <html>,
     переделывать компоненты для возврата не придётся.
     ======================================================== */
  :root[data-palette="emerald"] {
    color-scheme: dark;

    --bg:             oklch(16.5% 0.012 168);
    --bg-subtle:      oklch(19.5% 0.016 168);
    --surface:        oklch(21.5% 0.018 168);
    --surface-2:      oklch(25%   0.022 168);
    --border:         oklch(30%   0.022 168);
    --border-strong:  oklch(39%   0.030 168);

    --text:           oklch(97%   0.008 168);
    --text-muted:     oklch(80%   0.022 168);
    --text-faint:     oklch(66%   0.020 168);

    --accent:          oklch(78%   0.132 168);
    --accent-hover:    oklch(84%   0.120 168);
    --accent-contrast: oklch(17%   0.030 168);
    --accent-text:     oklch(82%   0.125 168);
    --accent-soft:     oklch(78% 0.132 168 / 0.12);
    --accent-ring:     oklch(78% 0.132 168 / 0.40);

    --success:         oklch(76%   0.145 158);
    --success-text:    oklch(80%   0.135 158);
    --danger:          oklch(64%   0.185  25);
    --danger-text:     oklch(74%   0.155  25);
    --warning:         oklch(78%   0.140  75);
    --warning-text:    oklch(82%   0.125  75);

    --glow: 0 0 60px oklch(78% 0.132 168 / 0.16);
  }

  /* EMERALD — светлая тема */
  :root[data-palette="emerald"][data-theme="light"] {
    color-scheme: light;

    --bg:             oklch(99%   0.004 168);
    --bg-subtle:      oklch(97%   0.008 168);
    --surface:        oklch(100%  0     0);
    --surface-2:      oklch(96.5% 0.010 168);
    --border:         oklch(90%   0.014 168);
    --border-strong:  oklch(80%   0.022 168);

    --text:           oklch(22%   0.020 168);
    --text-muted:     oklch(43%   0.022 168);
    --text-faint:     oklch(51%   0.020 168);

    --accent:          oklch(50%   0.118 168);
    --accent-hover:    oklch(44%   0.118 168);
    --accent-contrast: oklch(99%   0.005 168);
    --accent-text:     oklch(45%   0.118 168);
    --accent-soft:     oklch(50% 0.118 168 / 0.10);
    --accent-ring:     oklch(50% 0.118 168 / 0.40);

    --success:         oklch(50%   0.130 158);
    --success-text:    oklch(44%   0.125 158);
    --danger:          oklch(53%   0.200  25);
    --danger-text:     oklch(48%   0.195  25);
    --warning:         oklch(60%   0.140  65);
    --warning-text:    oklch(48%   0.130  65);

    --shadow-sm: 0 1px 2px oklch(22% 0.02 168 / 0.08);
    --shadow-md: 0 4px 16px oklch(22% 0.02 168 / 0.10);
    --shadow-lg: 0 16px 48px oklch(22% 0.02 168 / 0.12);
    --glow: 0 0 60px oklch(50% 0.118 168 / 0.10);
  }

  /* ========================================================
     Системная тема, когда пользователь не выбрал вручную.
     data-theme на <html> всегда перевешивает.
     ======================================================== */
  @media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
      color-scheme: light;

      --bg:             oklch(99%   0.004 265);
      --bg-subtle:      oklch(97%   0.008 265);
      --surface:        oklch(100%  0     0);
      --surface-2:      oklch(96.5% 0.012 265);
      --border:         oklch(90%   0.016 265);
      --border-strong:  oklch(80%   0.026 265);

      --text:           oklch(23%   0.028 265);
      --text-muted:     oklch(44%   0.030 265);
      --text-faint:     oklch(51%   0.028 265);

      --accent:          oklch(50%   0.175 266);
      --accent-hover:    oklch(44%   0.175 266);
      --accent-contrast: oklch(99%   0.005 265);
      --accent-text:     oklch(46%   0.175 266);
      --accent-soft:     oklch(50% 0.175 266 / 0.10);
      --accent-ring:     oklch(50% 0.175 266 / 0.40);

      --success:         oklch(50%   0.130 158);
      --success-text:    oklch(44%   0.125 158);
      --danger:          oklch(53%   0.200  25);
      --danger-text:     oklch(48%   0.195  25);
      --warning:         oklch(60%   0.140  65);
      --warning-text:    oklch(48%   0.130  65);

      --shadow-sm: 0 1px 2px oklch(23% 0.03 265 / 0.08);
      --shadow-md: 0 4px 16px oklch(23% 0.03 265 / 0.10);
      --shadow-lg: 0 16px 48px oklch(23% 0.03 265 / 0.12);
      --glow: 0 0 60px oklch(50% 0.175 266 / 0.10);
    }

    :root[data-palette="emerald"]:not([data-theme]) {
      --bg:             oklch(99%   0.004 168);
      --bg-subtle:      oklch(97%   0.008 168);
      --surface:        oklch(100%  0     0);
      --surface-2:      oklch(96.5% 0.010 168);
      --border:         oklch(90%   0.014 168);
      --border-strong:  oklch(80%   0.022 168);

      --text:           oklch(22%   0.020 168);
      --text-muted:     oklch(43%   0.022 168);
      --text-faint:     oklch(51%   0.020 168);

      --accent:          oklch(50%   0.118 168);
      --accent-hover:    oklch(44%   0.118 168);
      --accent-contrast: oklch(99%   0.005 168);
      --accent-text:     oklch(45%   0.118 168);
      --accent-soft:     oklch(50% 0.118 168 / 0.10);
      --accent-ring:     oklch(50% 0.118 168 / 0.40);

      --glow: 0 0 60px oklch(50% 0.118 168 / 0.10);
    }
  }

  /* ========================================================
     Запасной путь для движков без oklch() (Safari < 15.4).
     @supports только добавляет: современные браузеры сюда не заходят.
     ======================================================== */
  @supports not (color: oklch(50% 0.1 180)) {
    :root {
      --bg: #0c0f17;            --bg-subtle: #111620;
      --surface: #161c28;       --surface-2: #1d2433;
      --border: #293040;        --border-strong: #3d485e;
      --text: #f3f5f9;          --text-muted: #b9c2d4;
      --text-faint: #8e99ae;
      --accent: #7baaff;        --accent-hover: #93beff;
      --accent-contrast: #091123; --accent-text: #91bdff;
      --accent-soft: rgba(123, 170, 255, 0.14);
      --accent-ring: rgba(123, 170, 255, 0.40);
      --success: #5fd3a3;       --success-text: #74dcb0;
      --danger: #e4584f;        --danger-text: #f08078;
      --warning: #e5a94e;       --warning-text: #edbd75;
    }
    :root[data-theme="light"] {
      --bg: #fafcff;            --bg-subtle: #f2f5fb;
      --surface: #ffffff;       --surface-2: #eff4fc;
      --border: #dde3f0;        --border-strong: #bfc8dc;
      --text: #181d2a;          --text-muted: #525b70;
      --text-faint: #666f85;
      --accent: #3459c5;        --accent-hover: #2a4aad;
      --accent-contrast: #ffffff; --accent-text: #2f51b6;
      --accent-soft: rgba(52, 89, 197, 0.10);
      --accent-ring: rgba(52, 89, 197, 0.40);
      --success: #1f7a5c;       --success-text: #1a6b50;
      --danger: #c0392f;        --danger-text: #ad3228;
      --warning: #9a6a16;       --warning-text: #875c12;
    }
    :root[data-palette="emerald"] {
      --bg: #0b100e;            --bg-subtle: #121a16;
      --surface: #16201b;       --surface-2: #1d2a23;
      --border: #27372e;        --border-strong: #364c40;
      --accent: #6fd3ad;        --accent-hover: #8ae0c0;
      --accent-contrast: #0b1a14; --accent-text: #7ddbb6;
      --accent-soft: rgba(111, 211, 173, 0.12);
      --accent-ring: rgba(111, 211, 173, 0.40);
    }
    :root[data-palette="emerald"][data-theme="light"] {
      --bg: #fbfdfc;            --bg-subtle: #f3f8f6;
      --surface: #ffffff;       --surface-2: #eef5f2;
      --border: #dde8e3;        --border-strong: #c0d2ca;
      --text: #16231e;          --text-muted: #51665e;
      --text-faint: #65786f;
      --accent: #1f7a5c;        --accent-hover: #17654c;
      --accent-contrast: #ffffff; --accent-text: #1b6d52;
      --accent-soft: rgba(31, 122, 92, 0.10);
      --accent-ring: rgba(31, 122, 92, 0.40);
    }
  }
}