/* Game Pulse landing v4 - shared tokens.
   Shell = clad-derived paper/ink world. Widgets = Game Pulse product UI (DESIGN.md).
   CSS custom properties inherit into widget shadow roots. */

@import url("fonts.css");

:root {
  /* Shell - paper and ink */
  --paper: #FBFBF9;
  --paper-2: #F2F2F0;
  --ink: #0A0A0A;
  --ink-soft: #18181B;
  --muted: #6B6B6B;
  --meta: #78716C;
  --foot-link: #57534E;
  --rule: #E7E5E4;
  --rule-strong: #D6D3D1;
  --rule-faint: #E5E5E5;
  --tile: #F5F5F4;
  --outline: #D4D4D8;
  --night: #0B0B0E;
  --night-2: #16161A;
  --strand: rgb(41, 41, 38);
  --scrollbar-thumb: #C9C5BF;

  /* Single accent shared by shell and product: Game Pulse blue */
  --accent: #076FED;
  --accent-soft: rgba(7, 111, 237, 0.12);

  /* Shell type */
  --font-display: "Inter", system-ui, sans-serif;
  --font-text: "Source Sans 3", system-ui, sans-serif;
  --font-code: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-eyebrow: 12px;
  --fs-h1: clamp(48px, 5vw, 72px);
  --fs-h2: clamp(36px, 4.2vw, 60px);
  --fs-h3: 24px;
  --fs-statement: clamp(24px, 2.3vw, 32px);
  --fs-sub: clamp(18px, 1.55vw, 22px);
  --fs-lead: clamp(14px, 1.25vw, 18px);
  --fs-button: 14.5px;
  --tracking-display: -0.025em;
  --tracking-eyebrow: 0.12em;

  /* Shell layout */
  --container: 1280px;
  --gutter: 24px;
  --radius-pill: 9999px;
  --radius-card: 24px;
  --radius-panel: 16px;
  --radius-row: 12px;
  --radius-tile: 8px;

  /* Shell motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-roll: cubic-bezier(0.76, 0, 0.24, 1);

  /* Game Pulse product UI (light theme, DESIGN.md) - used inside widgets */
  --gp-bg: #F6F7F9;
  --gp-fg: #0F1729;
  --gp-card: #FFFFFF;
  --gp-popover: #FFFFFF;
  --gp-primary: #076FED;
  --gp-primary-fg: #FFFFFF;
  --gp-secondary: #EBECF0;
  --gp-secondary-fg: #364363;
  --gp-muted: #EBECF0;
  --gp-muted-fg: #65758B;
  --gp-warning: #F59F0A;
  --gp-destructive: #DC2828;
  --gp-success: #1FA365;
  --gp-info: #0DA2E7;
  --gp-violet: #A347D1;
  --gp-border: #DCDFE4;
  --gp-ring: #076FED;
  --gp-discord: #5865F2;
  --gp-vk: #2787F5;
  --gp-zendesk: #03363D;
  --gp-steam: #1B2838;
  --gp-yandex: #FC3F1D;
  --gp-shadow-card: 0 1px 3px rgba(15, 23, 41, 0.06), 0 1px 2px rgba(15, 23, 41, 0.04);
  --gp-shadow-elevated: 0 8px 24px rgba(15, 23, 41, 0.08), 0 2px 6px rgba(15, 23, 41, 0.05);
  --gp-radius-sm: 6px;
  --gp-radius-md: 8px;
  --gp-radius-lg: 10px;
  --gp-radius-xl: 12px;
  /* Space Grotesk has no Cyrillic: Wix Madefor Display renders Cyrillic glyphs (research/fonts/cyrillic-companion.md) */
  --gp-font-heading: "Space Grotesk", "Wix Madefor Display", system-ui, sans-serif;
  --gp-font-body: "Inter", system-ui, sans-serif;
  --gp-font-mono: "Source Code Pro", ui-monospace, Menlo, monospace;
  --gp-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --gp-fast: 150ms;
  --gp-normal: 250ms;
  --gp-smooth: 350ms;
}

/* Dark theme: <html data-theme="dark">, set before first paint by the inline <head> script.
   Existing tokens are redefined here. Tokens marked "dark-only" exist only in this block: every use carries
   its light literal as the var() fallback, so the light theme renders from the original values by construction. */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Shell - night paper and warm light ink */
  --paper: #0B0B0E;
  --paper-2: #16161A;
  --ink: #EDEBE6;
  --ink-soft: #D6D3CD;
  --muted: #A3A09A;
  --meta: #9C958E;
  --foot-link: #B5AFA7;
  --rule: #26262B;
  --rule-strong: #34343A;
  --rule-faint: #2A2A30;
  --tile: #222227;
  --outline: #3C3C43;
  --scrollbar-thumb: #3A3A40;
  --stone-400: #8F8982;
  --stone-700: #C9C3BB;
  --accent-text: #5AA2F8;
  --accent-soft: rgba(7, 111, 237, 0.22);
  --gp-row: #16243A;
  --error: #F97066;
  --error-soft: rgba(249, 112, 102, 0.16);
  --placeholder: #8A8A8A;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.45), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 24px 60px -36px rgba(0, 0, 0, 0.6);
  --shadow-lift: 0 30px 70px -30px rgba(0, 0, 0, 0.75);

  /* Shell, dark-only */
  --surface: #1C1C21;          /* raised white surfaces: cards, plans, table, form, inputs */
  --surface-2: #26262C;        /* thumbs of pill toggles, popovers */
  --pill: #EDEBE6;             /* primary pill fill: inverts to a light pill (light: --ink-soft) */
  --on-ink: #0B0B0E;           /* label on ink fills */
  --ink-hover: #FFFFFF;        /* primary pill hover (light: #000) */
  --field: #111114;            /* pilot input, recessed into the form card */
  --header-glass: rgba(11, 11, 14, 0.8);
  --header-rule: rgba(255, 255, 255, 0.07);
  --nav-pill: #1C1C21;
  --pill-track: rgba(22, 22, 26, 0.7);
  --thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 6px -2px rgba(0, 0, 0, 0.5);
  --popover-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.7);
  --wordmark: #CFCAC3;
  --thread-ink: #D6D3CD;
  --grain-opacity: 0.2;
  --panel-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.3);
  --stage-glow: radial-gradient(70% 60% at 50% 38%, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 70%);

  /* Game Pulse product UI, dark (repo-root DESIGN.md token table) */
  --gp-bg: #080C16;
  --gp-fg: #E7EBEF;
  --gp-card: #111722;
  --gp-popover: #151B29;
  --gp-primary: #2584F8;
  --gp-primary-fg: #080C16;
  --gp-secondary: #232934;
  --gp-secondary-fg: #C8D1DA;
  --gp-muted: #232934;
  --gp-muted-fg: #8190A6;
  --gp-success: #26C57B;
  --gp-violet: #B97BE0;
  --gp-border: #252C37;
  --gp-ring: #2584F8;
  --gp-zendesk: #7BAFB5;
  --gp-steam: #9FB1C4;
  --gp-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
  --gp-shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);

  /* Game Pulse product UI, dark-only (widgets keep their own light literals as fallbacks) */
  --gp-hairline: #1D2430;
  --gp-line-strong: #414B5C;
  --gp-subtle: #161D29;
  --gp-select: #13223A;
  --gp-hover: rgba(255, 255, 255, 0.04);
  --gp-secondary-hover: #2C3441;
  --gp-skel-1: #1B2230;
  --gp-skel-2: #273040;
  --gp-primary-hover: #4A98FA;
  --gp-muted-text: #8E9CB0;
  --gp-faint: #7A889D;
  --gp-ok-text: #3DD68C;
  --gp-crit-text: #F87171;
  --gp-warn-text: #FBBF24;
  --gp-pri-text: #5AA2F8;
  --gp-info-text: #38BDF8;
  --gp-warm: #211B10;
  --gp-danger-soft: #3A1A1E;
  --gp-bubble-me: #122B4B;
  --gp-chat-bg: #0B111C;
  --gp-glass: rgba(35, 41, 52, 0.78);
  --gp-glass-hover: #2A3342;
  --gp-glass-line: rgba(255, 255, 255, 0.06);
  --gp-scrim: rgba(0, 0, 0, 0.5);
  --gp-shadow-thumb: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --gp-shadow-pop: 0 10px 25px -5px rgba(0, 0, 0, 0.55), 0 8px 10px -6px rgba(0, 0, 0, 0.45);
  --gp-shadow-drawer: -12px 0 32px -8px rgba(0, 0, 0, 0.6);

  /* Zendesk agent-workspace mock inside gp-zendesk, dark-only */
  --zd-bg: #18181B;
  --zd-surface: #1F1F23;
  --zd-line: #2E2E33;
  --zd-line-soft: #26262A;
  --zd-ink: #F4F4F5;
  --zd-on-ink: #18181B;
  --zd-text: #E4E4E7;
  --zd-muted: #A1A1AA;
  --zd-subtle: #2E2E33;
  --zd-strong: #D4D4D8;
  --zd-edge: #3F3F46;
  --zd-focus: #71717A;
  --zd-ink-hover: #FFFFFF;

  /* gp-integrations band, dark-only: the night panels lift off the night paper as an elevated row */
  --int-top: #232329;
  --int-bottom: #16161B;
  --int-rule: rgba(255, 255, 255, 0.1);
  --int-scrim: linear-gradient(to top, #16161B 0%, rgba(22, 22, 27, 0.9) 45%, rgba(22, 22, 27, 0) 100%);
  --int-glass: rgba(40, 40, 48, 0.92);
  --int-glass-rear: rgba(33, 33, 40, 0.86);
  --int-glass-solid: rgba(36, 36, 44, 0.95);
  --int-glass-ring: #28282F;
}

::selection { background: var(--accent-soft); color: var(--ink); }