/* PlugPT design tokens.
   Direction: quiet studio dark. The ground is neutral graphite, not a tinted
   terminal; text is warm off-white, not mint. Green is the brand and it is
   spent sparingly -- on the primary action and on anything that is actually
   live -- because a colour that marks everything marks nothing. Hairlines are
   white at low opacity so a border recedes instead of glowing. Typography is
   sans for everything a person reads, with mono kept for what is literally
   code: a path, an identifier, a command. */
:root {
  /* Ground and surfaces, four steps so panels can layer without borders. */
  --plug-bg: #0d0f11;
  --plug-bg-soft: #121517;
  --plug-surface: #171a1d;
  --plug-surface-high: #1e2226;
  --plug-pill-bg: #1a1e21;

  /* Hairlines. Neutral, low contrast, never the brand colour. */
  --plug-edge: rgba(255, 255, 255, 0.10);
  --plug-edge-soft: rgba(255, 255, 255, 0.06);
  --plug-edge-hover: rgba(255, 255, 255, 0.18);

  /* The accent. One green, three weights, used for action and for live state. */
  --plug-green: #35d489;
  --plug-green-bright: #6fe7ae;
  --plug-green-dim: #2bb173;
  --plug-green-wash: rgba(53, 212, 137, 0.12);

  /* Text. A real neutral ramp; contrast carries hierarchy, colour does not. */
  --plug-white: #f5f7f8;
  --plug-text: #e3e7ea;
  --plug-text-dim: #a7aeb5;
  --plug-muted: #737c85;

  --plug-warn: var(--plug-text-dim);
  --plug-info: #58b6f0;
  --plug-bad: #f0666e;

  --font-mono: 'JetBrains Mono', 'Cascadia Code', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;

  /* Elevation instead of outlines: a raised surface should read as raised. */
  --plug-lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.7);
  --plug-lift-high: 0 2px 4px rgba(0, 0, 0, 0.45), 0 24px 60px -20px rgba(0, 0, 0, 0.85);

  --shell: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(4.5rem, 9vw, 9rem);
  --radius: 14px;
}

/* The reset every product page relies on. Nothing here names a component, so
   nothing here can collide with one. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}