/* AuthorFlow design tokens + typography + buttons + notices */

/* Golos Text (VK, OFL-licensed), self-hosted. Every stylesheet bundle
   (landing_styles, auth_styles, design_system_styles) loads tokens.css
   first, so the @font-face lives here only — not redeclared elsewhere. */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/static/fonts/golos-text/golos-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: 'Golos Text';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/static/fonts/golos-text/golos-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/static/fonts/golos-text/golos-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/static/fonts/golos-text/golos-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;
}

/* Playfair Display (OFL), self-hosted — редакционный дисплейный шрифт для
   заголовков лендинга. Только прямое начертание (без курсива). */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/playfair-display/playfair-400-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/playfair-display/playfair-400-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;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/playfair-display/playfair-700-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/playfair-display/playfair-700-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;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:900;font-display:swap;src:url(/static/fonts/playfair-display/playfair-900-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:900;font-display:swap;src:url(/static/fonts/playfair-display/playfair-900-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 {
      color-scheme: dark;
      /* Surfaces — neo-brutal (кабинет + лендинг + auth). Бывший coral/glass
         слой снят: единый источник правды, см. DESIGN.md. */
      --bg: #2a2723;
      --paper: #33302a;
      --paper-soft: #33302a;
      --paper-rgb: 51, 48, 42;
      --panel: var(--paper);
      --panel2: var(--paper-soft);
      --recessed: #242119;
      /* Text — floor вторичного ≥ #a89a86 (~5.4:1 на --bg) для WCAG AA */
      --ink: #d8cfbe;
      --text: var(--ink);
      --muted: #a89a86;
      --dim: #a89a86;
      /* Non-text chrome (borders/tracks) — не использовать как цвет текста */
      --chrome: #6f665a;
      /* Lines */
      --line: #52493d;
      --line-soft: #52493d;
      --line2: #52493d;
      /* Brand — lime neo-brutal */
      --accent: #d6ff3f;
      --accent-rgb: 214, 255, 63;
      --accent-strong: #c4ee2c;
      --accent-soft: rgba(214, 255, 63, .16);
      --glow: transparent;
      --accent-text: #d6ff3f;
      /* Text on lime fills — white fails (~1.15:1); dark ink holds. */
      --on-accent: #2a2723;
      /* Status — risk/danger keep warm alert hue; success follows brand lime */
      --success: #d6ff3f;
      --success-soft: rgba(214, 255, 63, .16);
      --success-border: #52493d;
      --warning: #d6ff3f;
      --warning-soft: rgba(214, 255, 63, .14);
      --warning-text: #d6ff3f;
      --info: #a89a86;
      --info-soft: rgba(255, 255, 255, .05);
      --info-text: #a89a86;
      --risk: #d98a78;
      --risk-soft: rgba(217, 138, 120, .14);
      --risk-border: #b3452f;
      --danger: #d98a78;
      --danger-soft: rgba(179, 69, 47, .16);
      --danger-border: #b3452f;
      /* Layout — sharp neo-brutal */
      --radius: 0;
      --radius-sm: 0;
      --radius-pill: 0;
      --shadow: none;
      /* Surfaces (no glass) */
      --glass-bg: #2a2723;
      --glass-border: #52493d;
      --glass-inner-highlight: transparent;
      --glass-shadow: transparent;
      /* Spacing scale — 4px base unit. Use these instead of ad-hoc margin/
         padding values in new or touched code; existing values migrate
         incrementally rather than in one mechanical pass. */
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
      --space-7: 32px;
      --space-8: 40px;
      --space-9: 48px;
      --space-10: 64px;
      /* Typography scale */
      --type-display-size: clamp(24px, 2.2vw, 32px);
      --type-display-weight: 650;
      --type-display-line: 1.2;
      --type-display-landing-size: clamp(34px, 6vw, 60px);
      --type-title-size: clamp(22px, 3vw, 28px);
      --type-title-weight: 680;
      --type-title-line: 1.15;
      --type-section-size: 22px;
      --type-section-weight: 700;
      --type-section-line: 1.2;
      --type-sub-size: 18px;
      --type-sub-weight: 700;
      --type-sub-line: 1.25;
      --type-body-size: 15px;
      --type-body-weight: 400;
      --type-body-line: 1.55;
      --type-caption-size: 13px;
      --type-caption-weight: 640;
      --type-caption-line: 1.45;
      --type-eyebrow-size: 11px;
      --type-eyebrow-weight: 600;

      /* Breakpoints (use in @media max-width) */
      --bp-sm: 640px;
      --bp-md: 900px;
      --bp-lg: 1100px;

      /* Motion — сильные кривые вместо стандартных CSS-easing, иначе анимации ощущаются вялыми */
      --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
      --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
      --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    }

/* Global reduced-motion respect: любая анимация/переход в проекте (auth.css,
   app.css, landing.css) сохраняет свою продолжительность как последнюю правку,
   но по факту завершается моментально, если пользователь просит уменьшить
   движение. app.css и landing.css сами добавляют такое же правило локально —
   оставлено на месте, чтобы каждый bundle работал автономно даже без tokens.css. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
      font-size: var(--type-body-size);
      font-weight: var(--type-body-weight);
      line-height: var(--type-body-line);
    }
    /* Base link color — without this, any <a> not covered by a more specific
       button/nav-link class (e.g. inline text links) falls back to the
       browser default blue/visited-purple instead of the brand palette. */
    a { color: var(--accent-text); }
    a:hover { color: var(--accent-text); }
    .type-display, h1 {
      font-size: var(--type-display-size);
      line-height: var(--type-display-line);
      font-weight: var(--type-display-weight);
      letter-spacing: 0;
    }
    .type-title, .account-top-main h2, .account-card-main h2 {
      font-size: var(--type-title-size);
      line-height: var(--type-title-line);
      font-weight: var(--type-title-weight);
      letter-spacing: 0;
    }
    .type-section, h2 {
      font-size: var(--type-section-size);
      line-height: var(--type-section-line);
      font-weight: var(--type-section-weight);
      letter-spacing: 0;
    }
    h3 {
      font-size: 17px;
      line-height: 1.3;
      font-weight: var(--type-section-weight);
      letter-spacing: 0;
    }
    .type-body { font-size: var(--type-body-size); line-height: var(--type-body-line); }
    .type-caption, .page-hint {
      font-size: var(--type-caption-size);
      line-height: var(--type-caption-line);
      font-weight: var(--type-caption-weight);
    }
    .eyebrow {
      font-size: var(--type-eyebrow-size);
      font-weight: var(--type-eyebrow-weight);
      letter-spacing: .06em;
      text-transform: uppercase;
    }

.btn,
    button,
    .primary-action,
    .setup-cta,
    a.primary,
    input[type="submit"]:not(.btn-ghost):not(.btn-secondary) {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      padding: 10px 16px;
      border: 1px solid transparent;
      border-radius: var(--radius-sm);
      background: var(--accent);
      color: var(--on-accent, #fff);
      font: inherit;
      font-size: var(--type-caption-size);
      font-weight: var(--type-section-weight);
      text-decoration: none;
      cursor: pointer;
      touch-action: manipulation;
      transition: background .16s var(--ease-out), border-color .16s var(--ease-out),
        color .16s var(--ease-out), box-shadow .16s var(--ease-out), transform .12s var(--ease-out);
    }
    .btn:hover,
    button:hover:not(:disabled),
    .primary-action:hover,
    .setup-cta:hover,
    a.primary:hover {
      background: var(--accent-strong);
    }
    .btn:disabled,
    button:disabled {
      opacity: .5;
      cursor: not-allowed;
    }
    .btn:active:not(:disabled),
    button:active:not(:disabled),
    .primary-action:active,
    .setup-cta:active,
    a.primary:active {
      transform: scale(.97);
    }
    .btn-secondary,
    button.secondary,
    a.secondary,
    .switch,
    .ghost-btn {
      background: transparent;
      color: var(--ink);
      border-color: var(--line);
    }
    .btn-secondary:hover,
    button.secondary:hover,
    a.secondary:hover,
    .switch:hover,
    .ghost-btn:hover {
      background: var(--paper-soft);
      border-color: var(--accent);
      color: var(--ink);
    }
    .btn-ghost,
    button.ghost {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      background: transparent;
      color: var(--muted);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      padding: 7px 12px;
      font: inherit;
      font-weight: 620;
      text-decoration: none;
      cursor: pointer;
      touch-action: manipulation;
      transition: background .16s var(--ease-out), border-color .16s var(--ease-out),
        color .16s var(--ease-out), transform .12s var(--ease-out);
    }
    .btn-ghost:hover,
    button.ghost:hover {
      background: var(--paper-soft);
      border-color: var(--accent);
      color: var(--ink);
    }
    .btn-link,
    .meta a,
    .form-actions a,
    .open-link,
    .muted-link,
    .secondary-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 7px 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--paper-soft);
      color: var(--ink);
      font-size: var(--type-caption-size);
      font-weight: var(--type-section-weight);
      text-decoration: none;
      cursor: pointer;
      transition: border-color .16s var(--ease-out), color .16s var(--ease-out),
        background .16s var(--ease-out), transform .12s var(--ease-out);
    }
    .btn-link:hover,
    .meta a:hover,
    .form-actions a:hover,
    .open-link:hover,
    .muted-link:hover,
    .secondary-link:hover {
      border-color: var(--accent);
      color: var(--ink);
      background: var(--paper-soft);
    }
    .btn-link:active,
    .meta a:active,
    .form-actions a:active,
    .open-link:active,
    .muted-link:active,
    .secondary-link:active {
      transform: scale(.97);
    }
    .landing .btn,
    nav .btn {
      border-radius: 9px;
      font-weight: 600;
      font-size: var(--type-body-size);
      padding: 13px 22px;
      min-height: auto;
    }
    .landing .btn.ghost,
    nav .btn.ghost {
      background: transparent;
      color: var(--text);
      border-color: var(--line2);
    }
    button.ghost.danger { border-color: rgba(230, 161, 95, .5); color: var(--risk); }

.notice.ok {
      background: var(--success-soft);
      border-color: var(--success-border);
      color: var(--success);
    }
    .notice.warn {
      background: var(--warning-soft);
      border-color: rgba(240, 201, 117, .28);
      color: var(--warning);
    }
    .usage-fill.is-high { background: var(--warning); }
    .usage-fill.is-mid { background: var(--info); }
    .usage-fill.is-low { background: var(--success); }

/* Shared billing period toggle (landing + tariffs) */
.pay-check { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.pay-switch label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  color: var(--muted);
  font-size: var(--type-body-size);
  font-weight: var(--type-caption-weight);
}
.pay-track {
  width: 44px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--paper-soft);
  border: 1px solid var(--line-soft);
  position: relative;
  transition: background .2s var(--ease-out);
  flex: 0 0 auto;
}
.pay-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s var(--ease-out);
}
.pay-save { color: var(--accent-text); font-size: var(--type-caption-size); }
#tariff-annual:checked ~ .pay-switch .pay-track,
#annual:checked ~ .pay-switch .pay-track {
  background: var(--accent);
  border-color: var(--accent);
}
#tariff-annual:checked ~ .pay-switch .pay-knob,
#annual:checked ~ .pay-switch .pay-knob {
  transform: translateX(20px);
}