/* 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;
}

:root {
      color-scheme: dark;
      /* Surfaces — shared app + landing */
      --bg: #121317;
      --paper: #1b1d23;
      --paper-soft: #23252e;
      --paper-rgb: 27, 29, 35;
      --panel: var(--paper);
      --panel2: var(--paper-soft);
      /* Text */
      --ink: #ecebf0;
      --text: var(--ink);
      --muted: #989ba8;
      --dim: #8b8e89;
      /* Lines */
      --line: #2f323d;
      --line-soft: #262933;
      --line2: rgba(255, 255, 255, .17);
      /* Brand — coral, one identity across the whole product (dashboard +
         landing + auth). Was indigo (#5e6ad2, literally Linear's brand hex)
         during the phased glass-system rollout; now the base, not a
         per-page override — see DESIGN.md. */
      --accent: #c94a28;
      --accent-rgb: 201, 74, 40;
      /* Darker than --accent, not lighter — a lighter hover fill dropped white
         button text below WCAG AA; this shade holds white text at ~5.9:1
         while still reading as a clear "pressed" hover cue. */
      --accent-strong: #b03f22;
      --accent-soft: rgba(201, 74, 40, .14);
      --glow: rgba(201, 74, 40, .16);
      /* --accent as TEXT (not background/border) fails WCAG AA on dark
         surfaces here; this brightened variant clears 4.5:1 everywhere it's used
         as foreground text/icon color. Keep --accent itself for backgrounds/borders. */
      --accent-text: #ffa680;
      /* Status */
      --success: #5eeaa8;
      --success-soft: rgba(94, 234, 168, .14);
      --success-border: rgba(94, 234, 168, .35);
      --warning: #f0c975;
      --warning-soft: rgba(240, 201, 117, .12);
      --warning-text: #f5d78a;
      --info: #8ecae6;
      --info-soft: rgba(142, 202, 230, .14);
      --info-text: #a8d8ef;
      --risk: #e6a15f;
      --risk-soft: rgba(230, 161, 95, .14);
      --risk-border: rgba(230, 161, 95, .35);
      --danger: #e5484d;
      --danger-soft: rgba(229, 72, 77, .12);
      --danger-border: rgba(229, 72, 77, .35);
      /* Layout */
      --radius: 14px;
      --radius-sm: 10px;
      --radius-pill: 999px;
      --shadow: 0 18px 46px rgba(0, 0, 0, .38);
      /* Glass card surface (site-wide, see app.css) */
      --glass-bg: rgba(255, 255, 255, .045);
      --glass-border: rgba(255, 255, 255, .10);
      --glass-inner-highlight: rgba(255, 255, 255, .14);
      --glass-shadow: rgba(0, 0, 0, .42);
      /* 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: 20px;
      --type-section-weight: 680;
      --type-section-line: 1.2;
      --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: #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 {
      background: transparent;
      color: var(--muted);
      border: 1px solid var(--line);
      padding: 7px 12px;
      font-weight: 620;
    }
    .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: auto;
      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);
}