/*
 * PRO-КРЕАТИВ AI — shared typography tokens.
 *
 * This file is loaded last so the landing page, cabinet and the inline
 * component styles all use the same readable type scale. Layout and colour
 * are intentionally left to the existing component styles.
 */
:root {
  --font-family-base: "Manrope", "Inter", Arial, sans-serif;

  --font-xs: 11px;
  --font-sm: 13px;
  --font-ui: 15px;
  --font-body: 16px;
  --font-lead: 18px;
  --font-card-title: 22px;
  --font-page-title: 30px;
  --font-section: 48px;
  --font-hero: 64px;

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

  --line-height-hero: 1.05;
  --line-height-section: 1.12;
  --line-height-card: 1.25;
  --line-height-ui: 1.45;
  --line-height-body: 1.58;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--font-family-base);
}

body {
  font-size: var(--font-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
}

/* Public landing */
body:not(:has(.app-shell)) {
  font-size: var(--font-body);
  line-height: var(--line-height-body);
}

body:not(:has(.app-shell)) .eyebrow,
body:not(:has(.app-shell)) .hero-proof b,
body:not(:has(.app-shell)) .stage-topline,
body:not(:has(.app-shell)) .stage-copy small,
body:not(:has(.app-shell)) .showcase-art::after {
  font-size: var(--font-xs) !important;
}

body:not(:has(.app-shell)) .hero h1,
body:not(:has(.app-shell)) .home-hero h1 {
  font-size: clamp(40px, 4.3vw, var(--font-hero)) !important;
  font-weight: var(--font-weight-heavy);
  line-height: var(--line-height-hero) !important;
}

body:not(:has(.app-shell)) .lead,
body:not(:has(.app-shell)) .home-hero .lead,
body:not(:has(.app-shell)) .section-intro,
body:not(:has(.app-shell)) .template-landing .lead,
body:not(:has(.app-shell)) .template-landing .section-head > p {
  font-size: var(--font-lead) !important;
  line-height: var(--line-height-body) !important;
}

body:not(:has(.app-shell)) .home-section h2,
body:not(:has(.app-shell)) .section h2,
body:not(:has(.app-shell)) .template-landing h2,
body:not(:has(.app-shell)) .home-cta h2 {
  font-size: clamp(32px, 3.2vw, var(--font-section)) !important;
  font-weight: var(--font-weight-heavy);
  line-height: var(--line-height-section) !important;
}

body:not(:has(.app-shell)) .branch-card h3,
body:not(:has(.app-shell)) .process-result h3,
body:not(:has(.app-shell)) .template-landing h3 {
  font-size: var(--font-card-title) !important;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-card) !important;
}

body:not(:has(.app-shell)) .branch-card p,
body:not(:has(.app-shell)) .process-step p,
body:not(:has(.app-shell)) .process-result p,
body:not(:has(.app-shell)) .showcase-card p,
body:not(:has(.app-shell)) .feature-card p,
body:not(:has(.app-shell)) .audience-card p,
body:not(:has(.app-shell)) .home-plan p,
body:not(:has(.app-shell)) .template-landing .muted {
  font-size: var(--font-body) !important;
  line-height: var(--line-height-body) !important;
}

body:not(:has(.app-shell)) .showcase-card h3,
body:not(:has(.app-shell)) .feature-card h3,
body:not(:has(.app-shell)) .audience-card h3,
body:not(:has(.app-shell)) .process-step h3 {
  font-size: 18px !important;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-card) !important;
}

body:not(:has(.app-shell)) .branch-card > span,
body:not(:has(.app-shell)) .branch-list li,
body:not(:has(.app-shell)) .format-chip,
body:not(:has(.app-shell)) .template-landing .label,
body:not(:has(.app-shell)) .template-landing .strip-label,
body:not(:has(.app-shell)) .template-landing .step .n {
  font-size: var(--font-sm) !important;
}

body:not(:has(.app-shell)) .text-link,
body:not(:has(.app-shell)) .source-public-shell .nav-links a,
body:not(:has(.app-shell)) .source-public-shell .btn,
body:not(:has(.app-shell)) .button {
  font-size: var(--font-ui) !important;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-ui);
}

body:not(:has(.app-shell)) .topbar nav,
body:not(:has(.app-shell)) .source-public-shell .nav-links {
  font-size: var(--font-ui);
}

/* Authenticated users see the compact home header, where CTA contrast is
 * intentionally different from the public registration CTA. */
body:has(.home-hero) .home-hero-actions .home-primary-cta.is-authenticated {
  color: #fff !important;
}

body:has(.home-hero) .home-hero-actions .home-examples-cta.is-authenticated {
  color: #090909 !important;
  border-color: rgba(244, 181, 255, .7) !important;
  background: linear-gradient(135deg, #a614f6, #e320d7) !important;
  box-shadow: 0 12px 32px rgba(229, 24, 216, .24) !important;
}

/* Keep the "Старый способ" card distinct with a restrained brand contour. */
body:has(.home-hero) .contrast-card.old-way {
  border-color: rgba(215, 68, 255, .34) !important;
  box-shadow: 0 0 0 1px rgba(215, 68, 255, .08);
}

/* Authenticated cabinet */
body:has(.app-shell) {
  font-family: var(--font-family-base);
  font-size: var(--font-ui);
  line-height: var(--line-height-ui);
}

body:has(.app-shell) .app-shell,
body:has(.admin-page) .admin-page {
  font-family: var(--font-family-base) !important;
}

body:has(.app-shell) .app-nav-label,
body:has(.app-shell) .app-kpi-label,
body:has(.app-shell) .app-project-status,
body:has(.app-shell) .app-admin-link,
body:has(.app-shell) .app-card-kicker,
body:has(.app-shell) .ad-card-kicker,
body:has(.app-shell) .generation-label,
body:has(.app-shell) .master-summary-kicker,
body:has(.app-shell) .creator-summary-kicker {
  font-size: var(--font-xs) !important;
  line-height: var(--line-height-ui);
}

body:has(.app-shell) .app-nav-item,
body:has(.app-shell) .app-site-link,
body:has(.app-shell) .app-section-head a,
body:has(.app-shell) .app-create-cta,
body:has(.app-shell) .app-logout,
body:has(.app-shell) .app-topbar,
body:has(.app-shell) .app-desktop-nav,
body:has(.app-shell) .app-bottom-nav a,
body:has(.app-shell) .button,
body:has(.app-shell) .admin-button {
  font-size: var(--font-ui) !important;
  line-height: var(--line-height-ui);
}

body:has(.app-shell) .app-section-head a {
  font-weight: var(--font-weight-semibold);
}

body:has(.app-shell) .app-nav-item,
body:has(.app-shell) .app-create-cta,
body:has(.app-shell) .button,
body:has(.app-shell) .admin-button {
  font-weight: var(--font-weight-bold);
}

body:has(.app-shell) .app-page-head h1,
body:has(.app-shell) .master-card h1,
body:has(.app-shell) .project-page .section-head h1,
body:has(.app-shell) .marketplace-project-head h1,
body:has(.app-shell) .ad-project-head h1 {
  font-size: clamp(var(--font-page-title), 3.2vw, 42px) !important;
  font-weight: var(--font-weight-heavy);
  line-height: 1.08 !important;
  letter-spacing: -.045em;
}

/* The existing hero banner has a deliberate compact lockup; keep its prior
 * proportions while the rest of the landing page uses the shared scale. */
body:not(:has(.app-shell)) .home-hero h1 {
  font-size: clamp(38px, 4vw, 50px) !important;
  line-height: .98 !important;
}

body:has(.app-shell) .app-page-head p,
body:has(.app-shell) .master-card > .master-form-pane > .lead,
body:has(.app-shell) .master-card .lead,
body:has(.app-shell) .project-meta,
body:has(.app-shell) .app-projects-page .app-page-head p {
  font-size: var(--font-lead) !important;
  line-height: var(--line-height-body) !important;
}

body:has(.app-shell) .app-topbar-title,
body:has(.app-shell) .app-section-head h2,
body:has(.app-shell) .app-settings-card h2,
body:has(.app-shell) .app-billing-card h2,
body:has(.app-shell) .ad-brief-card h2,
body:has(.app-shell) .parameters-card summary,
body:has(.app-shell) .master-live-summary h2,
body:has(.app-shell) .workspace-card h2,
body:has(.app-shell) .creator-summary-section-head strong {
  font-size: var(--font-card-title) !important;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-card) !important;
}

body:has(.app-shell) .app-kpi-value,
body:has(.app-shell) .app-billing-card strong {
  font-size: var(--font-page-title) !important;
  font-weight: var(--font-weight-heavy);
  line-height: 1.1;
}

body:has(.app-shell) .app-creation-card strong,
body:has(.app-shell) .app-project-copy strong,
body:has(.app-shell) .app-notification-copy strong,
body:has(.app-shell) .app-popover-row strong,
body:has(.app-shell) .app-settings-card h3,
body:has(.app-shell) .app-tool-card h3,
body:has(.app-shell) .ad-tool-card h3,
body:has(.app-shell) .marketplace-project .series-current h2,
body:has(.app-shell) .marketplace-project .info-section h2 {
  font-size: 18px !important;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-card) !important;
}

body:has(.app-shell) .app-page-head p,
body:has(.app-shell) .app-creation-card small,
body:has(.app-shell) .app-project-copy small,
body:has(.app-shell) .app-list-meta,
body:has(.app-shell) .app-notification-copy p,
body:has(.app-shell) .app-settings-card > p,
body:has(.app-shell) .app-billing-card p,
body:has(.app-shell) .app-history-row span,
body:has(.app-shell) .app-popover-row small,
body:has(.app-shell) .app-popover-empty,
body:has(.app-shell) .app-filter-bar,
body:has(.app-shell) .ad-tool-card p,
body:has(.app-shell) .generation-copy p,
body:has(.app-shell) .parameters-note {
  font-size: var(--font-sm) !important;
  line-height: var(--line-height-body) !important;
}

body:has(.app-shell) .app-sidebar-user strong,
body:has(.app-shell) .app-user-popover-head strong,
body:has(.app-shell) .app-user-trigger-copy strong,
body:has(.app-shell) .app-creation-card strong {
  font-weight: var(--font-weight-bold);
}

body:has(.app-shell) .app-sidebar-user small,
body:has(.app-shell) .app-user-popover-head small,
body:has(.app-shell) .app-user-trigger-copy small,
body:has(.app-shell) .app-history-row span,
body:has(.app-shell) .app-notification-copy time {
  font-size: var(--font-sm) !important;
}

body:has(.app-shell) .app-filter-bar input,
body:has(.app-shell) .app-filter-bar select,
body:has(.app-shell) .app-settings-card input,
body:has(.app-shell) .app-settings-card select,
body:has(.app-shell) .app-settings-card textarea,
body:has(.app-shell) .app-project-menu-list a,
body:has(.app-shell) .app-project-menu-list button,
body:has(.app-shell) .master-form input,
body:has(.app-shell) .master-form select,
body:has(.app-shell) .master-form textarea,
body:has(.app-shell) .master-copy-grid label,
body:has(.app-shell) .master-file-title,
body:has(.app-shell) .master-summary-row dd,
body:has(.app-shell) .master-card-summary .master-summary-row dd,
body:has(.app-shell) .creator-summary-row dd,
body:has(.app-shell) .ad-brief-list dd,
body:has(.app-shell) .ad-brief-list dt,
body:has(.app-shell) .parameters-card dl,
body:has(.app-shell) .social-summary-column .master-summary-row dd {
  font-size: var(--font-ui) !important;
  line-height: var(--line-height-ui);
}

body:has(.app-shell) .app-settings-card label,
body:has(.app-shell) .app-filter-bar label,
body:has(.app-shell) .master-live-summary-row dt,
body:has(.app-shell) .master-summary-row dt,
body:has(.app-shell) .creator-summary-row dt,
body:has(.app-shell) .social-summary-column .master-summary-row dt,
body:has(.app-shell) .ad-brief-list dt {
  font-size: var(--font-sm) !important;
  line-height: var(--line-height-ui);
}

/* Admin dashboard follows the same UI/body split, without touching layout. */
body:has(.admin-page) {
  font-family: var(--font-family-base);
  font-size: var(--font-ui);
  line-height: var(--line-height-ui);
}

body:has(.admin-page) .admin-page h1 {
  font-size: var(--font-page-title) !important;
  font-weight: var(--font-weight-heavy);
  line-height: 1.1 !important;
}

body:has(.admin-page) .admin-section-head h2,
body:has(.admin-page) .admin-panel-head h2,
body:has(.admin-page) .admin-card h2,
body:has(.admin-page) .admin-drawer-head h2 {
  font-size: var(--font-card-title) !important;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-card) !important;
}

body:has(.admin-page) .admin-section-head p,
body:has(.admin-page) .admin-panel-head small,
body:has(.admin-page) .admin-filter,
body:has(.admin-page) .admin-toolbar,
body:has(.admin-page) .admin-table,
body:has(.admin-page) .admin-notice,
body:has(.admin-page) .admin-news-help {
  font-size: var(--font-sm) !important;
  line-height: var(--line-height-body);
}

body:has(.admin-page) .admin-button,
body:has(.admin-page) .admin-filter input,
body:has(.admin-page) .admin-filter select,
body:has(.admin-page) .admin-filter textarea {
  font-size: var(--font-ui) !important;
  line-height: var(--line-height-ui);
}

body:has(.admin-page) .admin-badge,
body:has(.admin-page) .admin-kicker,
body:has(.admin-page) .admin-support-kicker,
body:has(.admin-page) .admin-nav-heading,
body:has(.admin-page) .admin-metric-label,
body:has(.admin-page) .admin-drawer-kicker {
  font-size: var(--font-xs) !important;
  line-height: var(--line-height-ui);
}

/* Mobile scale: keep hierarchy, never shrink functional text below 11px. */
@media (max-width: 700px) {
  body:not(:has(.app-shell)) .hero h1,
  body:not(:has(.app-shell)) .home-hero h1 {
    font-size: clamp(36px, 10vw, 40px) !important;
    line-height: 1.06 !important;
  }

  body:not(:has(.app-shell)) .home-section h2,
  body:not(:has(.app-shell)) .section h2,
  body:not(:has(.app-shell)) .template-landing h2,
  body:not(:has(.app-shell)) .home-cta h2 {
    font-size: clamp(30px, 8vw, 34px) !important;
    line-height: 1.12 !important;
  }

  body:has(.app-shell) .app-page-head h1,
  body:has(.app-shell) .master-card h1,
  body:has(.app-shell) .project-page .section-head h1,
  body:has(.app-shell) .marketplace-project-head h1,
  body:has(.app-shell) .ad-project-head h1 {
    font-size: clamp(26px, 8vw, 30px) !important;
    line-height: 1.1 !important;
  }

  body:has(.app-shell) .app-page-head p,
  body:has(.app-shell) .master-card .lead,
  body:has(.app-shell) .project-meta {
    font-size: var(--font-body) !important;
  }

  body:has(.app-shell) .app-section-head h2,
  body:has(.app-shell) .app-settings-card h2,
  body:has(.app-shell) .app-billing-card h2,
  body:has(.app-shell) .ad-brief-card h2,
  body:has(.app-shell) .parameters-card summary,
  body:has(.app-shell) .workspace-card h2,
  body:has(.app-shell) .master-live-summary h2 {
    font-size: 18px !important;
  }

  body:has(.app-shell) .app-creation-card strong,
  body:has(.app-shell) .app-project-copy strong,
  body:has(.app-shell) .app-notification-copy strong,
  body:has(.app-shell) .app-settings-card h3,
  body:has(.app-shell) .app-tool-card h3,
  body:has(.app-shell) .ad-tool-card h3 {
    font-size: 16px !important;
  }

  body:has(.app-shell) .app-creation-card small,
  body:has(.app-shell) .app-project-copy small,
  body:has(.app-shell) .app-notification-copy p,
  body:has(.app-shell) .app-settings-card > p,
  body:has(.app-shell) .app-billing-card p,
  body:has(.app-shell) .ad-tool-card p {
    font-size: var(--font-sm) !important;
  }
}

@media (max-width: 720px) {
  body:not(:has(.app-shell)) .home-hero h1 {
    font-size: clamp(29px, 8.2vw, 35px) !important;
    line-height: 1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}