/* Plyomat brand tokens — single source of truth for the marketing site.
 * Mirrors apps/web/src/app/globals.css from plyomat-3-browser so the website
 * speaks the same visual language as the in-app product. Edit values here, not
 * scattered across module CSS. */

:root {
  color-scheme: dark;

  /* Brand palette */
  --color-cornflower-blue: #219fff;
  --color-mirage-navy: #152436;
  --color-charcoal-grey: #2a2d33;
  --color-baltic-black: #161719;

  /* Semantic surfaces */
  --color-bg: #0f1a26;
  --color-bg-deep: #161719;
  --color-bg-panel: #1a2c43;
  --color-bg-elevated: #1f3252;

  /* Semantic text */
  --color-text: #ffffff;
  --color-text-muted: #b6cadf;
  --color-text-faint: #7e93aa;

  /* Accent + status */
  --color-accent: #219fff;
  --color-accent-hover: #4ab3ff;
  --color-accent-press: #1885d8;
  --color-border: #1f3252;
  --color-divider: #1f3252;
  --color-success: #4ade80;
  --color-warning: #fbbf24;
  --color-danger: #f87171;
  --color-gold: #f7c548;

  /* RSQ zone colors — used in product/results contexts */
  --color-zone-reactive: #219fff;
  --color-zone-compliant: #f87171;
  --color-zone-stiff: #4ade80;
  --color-zone-developing: #fbbf24;

  /* Typography — display family aliases.
   * Widened-weight aliases (--font-hero etc.) fall back gracefully. */
  --font-hero: "Knockout 72", "Knockout-Bold", "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --font-stat: "Knockout 71", "Knockout-Bold", "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --font-display: "Knockout 51", "Knockout-Bold", "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --font-display-regular: "Knockout 49", "Knockout-Bold", "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --font-condensed: "Knockout 32", "Knockout-Bold", "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --font-condensed-bold: "Knockout 30", "Knockout-Bold", "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --font-sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", Monaco, "Cascadia Mono", "Roboto Mono", monospace;

  /* Spacing scale (8px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Elevation (dark UI shadows are subtle) */
  --shadow-glow-accent: 0 0 24px rgba(33, 159, 255, 0.35);
  --shadow-glow-accent-strong: 0 0 48px rgba(33, 159, 255, 0.55);
  --shadow-panel: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-panel-lg: 0 16px 48px rgba(0, 0, 0, 0.5);

  /* Motion — the Plyomat signature "punch" easing */
  --ease-punch: cubic-bezier(0.2, 1.4, 0.5, 1);
  --ease-out: cubic-bezier(0.2, 0.6, 0.4, 1);
  --duration-fast: 150ms;
  --duration-base: 240ms;
  --duration-slow: 400ms;
}

/* Tabular numerals — stat density everywhere by default for
 * numbers (the product is fundamentally about jump heights). */
.tabular,
.banner-stat,
[data-stat] {
  font-variant-numeric: tabular-nums;
}

/* Number "punch" — the Plyomat signature animation reused from Kiosk.
 * Apply to a hero number when its value should land with weight. */
@keyframes number-punch {
  0%   { transform: scale(0.7); opacity: 0.5; }
  60%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.animate-number-punch {
  animation: number-punch var(--duration-slow) var(--ease-punch);
}

/* Pulse-dot — for live indicators. */
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.2); opacity: 0.6; }
}
.animate-pulse-dot {
  animation: pulse-dot 1.2s ease-in-out infinite;
}

/* Accent glow — used on hero CTAs and active nav. */
@keyframes accent-glow {
  0%, 100% { box-shadow: 0 0 24px rgba(33, 159, 255, 0.35); }
  50%      { box-shadow: 0 0 36px rgba(33, 159, 255, 0.6); }
}