/* ═══════════════════════════════════════════════════════════════
   GruzPotok design tokens for the site SPA (app/static/index.html).
   Source: owner UI Blueprints, docs/design-tokens.json (2026-10-23).
   The site switches themes with :root[data-theme="light|dark"]; dark is the
   fallback. Legacy site variables are aliases so existing screens share the palette.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --gp-bg: #0C1834;
  --gp-bg-elevated: #132657;
  --gp-surface: #132657;
  --gp-surface-2: #192F60;
  --gp-surface-3: #213B70;
  --gp-border: #31466C;
  --gp-border-strong: #51668B;
  --gp-text: #E8EFFF;
  --gp-text-2: #C8D9FF;
  --gp-text-muted: #A5B2C5;
  --gp-primary: #2555B8;
  --gp-primary-press: #172D64;
  --gp-on-primary: #ffffff;
  --gp-on-accent: #1B2B43;
  --gp-link: #89B5FF;
  --gp-accent: #F26A3B;
  --gp-success: #5ED4B6;
  --gp-warning: #F4C76F;
  --gp-danger: #FFABB2;
  --gp-info: #89B5FF;
  --gp-primary-soft: rgba(59, 130, 246, 0.16);
  --gp-accent-soft: rgba(242, 106, 59, 0.16);
  --gp-success-soft: rgba(34, 197, 94, 0.16);
  --gp-warning-soft: rgba(234, 179, 8, 0.16);
  --gp-danger-soft: rgba(239, 68, 68, 0.16);
  --gp-info-soft: rgba(56, 189, 248, 0.16);
  --gp-skeleton: rgba(148, 163, 184, 0.12);
  --gp-skeleton-shine: rgba(255, 255, 255, 0.08);
  --gp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.28);
  --gp-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.35);
  --gp-shadow-3: 0 16px 48px rgba(0, 0, 0, 0.55);

  --gp-font: Inter, "Noto Sans", system-ui, sans-serif;
  --gp-fs-xs: 12px;  --gp-lh-xs: 16px;
  --gp-fs-sm: 13px;  --gp-lh-sm: 18px;
  --gp-fs-md: 14px;  --gp-lh-md: 22px;
  --gp-fs-lg: 18px;  --gp-lh-lg: 26px;
  --gp-fs-xl: 20px;  --gp-lh-xl: 26px;
  --gp-fs-2xl: 24px; --gp-lh-2xl: 30px;
  --gp-fs-3xl: 32px; --gp-lh-3xl: 38px;
  --gp-sp-1: 4px; --gp-sp-2: 8px; --gp-sp-3: 12px; --gp-sp-4: 16px;
  --gp-sp-5: 20px; --gp-sp-6: 24px; --gp-sp-7: 32px; --gp-sp-8: 40px;
  --gp-gutter: 16px;
  --gp-tap: 44px;
  --gp-r-sm: 8px; --gp-r-md: 14px; --gp-r-lg: 14px; --gp-r-xl: 20px; --gp-r-pill: 999px;
  --gp-dur-1: 120ms; --gp-dur-2: 200ms; --gp-dur-3: 280ms; --gp-dur-4: 1200ms;
  --gp-ease: cubic-bezier(0.2, 0, 0, 1);
  --gp-ease-out: cubic-bezier(0, 0, 0, 1);
  --gp-ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
}

:root[data-theme="light"] {
  --gp-bg: #F4F7FC;
  --gp-bg-elevated: #ffffff;
  --gp-surface: #ffffff;
  --gp-surface-2: #E8F0FF;
  --gp-surface-3: #DBE4F0;
  --gp-border: #DBE4F0;
  --gp-border-strong: #A5B2C5;
  --gp-text: #1B2B43;
  --gp-text-2: #172D64;
  --gp-text-muted: #65758E;
  --gp-primary: #2555B8;
  --gp-primary-press: #172D64;
  --gp-on-accent: #1B2B43;
  --gp-link: #2555B8;
  --gp-accent: #F26A3B;
  --gp-success: #11967C;
  --gp-warning: #B56B09;
  --gp-danger: #C7444B;
  --gp-info: #2555B8;
  --gp-primary-soft: #E8F0FF;
  --gp-accent-soft: #FFF1EB;
  --gp-success-soft: #E7F8F3;
  --gp-warning-soft: #FFF7DE;
  --gp-danger-soft: #FFF0F0;
  --gp-info-soft: #E8F0FF;
  --gp-skeleton: rgba(15, 23, 42, 0.07);
  --gp-skeleton-shine: rgba(255, 255, 255, 0.6);
  --gp-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
  --gp-shadow-2: 0 8px 24px rgba(15, 23, 42, 0.12);
  --gp-shadow-3: 0 16px 48px rgba(15, 23, 42, 0.22);
}

/* Existing SPA components keep their API and markup while sharing the owner tokens. */
:root, :root[data-theme="light"], :root[data-theme="dark"] {
  --bg: var(--gp-bg);
  --bg-soft: var(--gp-bg);
  --card: var(--gp-surface);
  --card-soft: var(--gp-surface);
  --text: var(--gp-text);
  --text-soft: var(--gp-text-2);
  --muted: var(--gp-text-muted);
  --muted-soft: var(--gp-text-muted);
  --border: var(--gp-border);
  --hover: var(--gp-surface-2);
  --chip-bg: var(--gp-surface-2);
}
html body, html button, html input, html select, html textarea,
html .page-content :where(h1, h2, h3, h4, p, span, div, a, label, th, td) {
  font-family: var(--gp-font);
}

@media (prefers-reduced-motion: reduce) {
  :root { --gp-dur-1: 1ms; --gp-dur-2: 1ms; --gp-dur-3: 1ms; --gp-dur-4: 1ms; }
}