/* pixelblockerplus.com: design tokens (CLAUDE.md principle 2, plan 3.6 and 5.1).
   GENERATED from pb_design/pb_tokens.json by `python3 pb_design/generate.py`. Do not edit by hand.
   Edit pb_design/pb_tokens.json, then run the command above from the V3 root.
   Written straight here by the generator. The site pages read the --pb-*
   names. Fonts come from Google Fonts (each page's <link>), so this file
   loads no font file. The web surface takes the exact iOS greys.
*/

:root {
  /* Colours: iOS Theme.swift (exact iOS values on the site, as the pixelblocker.app site's css) */
  --pb-red: #FF003C;
  --pb-red-dim: #CC0030;
  --pb-red-hot: #FF2D5B;
  --pb-red-subtle: rgba(255, 0, 60, 0.08);
  --pb-red-glow: rgba(255, 0, 60, 0.35);
  --pb-cyan: #00F0FF;
  --pb-yellow: #FCE300;
  --pb-green: #00FF9C;
  --pb-violet: #B46EFF;
  --pb-void: #06060B;
  --pb-deep: #0A0A12;
  --pb-card: #0D0D16;
  --pb-input: #090910;
  --pb-border: #151520;
  --pb-border-active: #252535;
  --pb-text: #E8E8F0;
  --pb-text-2: #6A6A80;
  --pb-text-3: #3A3A4A;
  --pb-outline: rgba(255, 255, 255, 0.06);
  /* Component opacities (iOS DesignSystem.swift) */
  --pb-red-chip: rgba(255, 0, 60, 0.12);
  --pb-red-bar-glow: rgba(255, 0, 60, 0.50);
  --pb-red-dot-glow: rgba(255, 0, 60, 0.60);
  --pb-atmos-red: rgba(255, 0, 60, 0.07);
  --pb-atmos-cyan: rgba(0, 240, 255, 0.03);
  --pb-green-subtle: rgba(0, 255, 156, 0.08);
  --pb-yellow-subtle: rgba(252, 227, 0, 0.08);
  /* Semantic: what the colours mean. Read these, not the raw colours. */
  --pb-accent: var(--pb-red);
  --pb-selected: var(--pb-red);
  --pb-active: var(--pb-green);
  --pb-tag: var(--pb-yellow);
  --pb-tier-free: var(--pb-text);
  --pb-tier-basic: var(--pb-yellow);
  --pb-tier-premium: var(--pb-red);
  --pb-on-accent: var(--pb-void);
  /* Fonts */
  --pb-font-display: 'Orbitron', sans-serif;
  --pb-font-body: 'Rajdhani', sans-serif;
  --pb-font-mono: 'Share Tech Mono', monospace;
  --pb-font-censor: 'Bebas Neue', Impact, sans-serif;
  /* Notch ladder (corner cut; top-right and bottom-left) */
  --pb-notch-chip: 4px;
  --pb-notch-browser: 5px;
  --pb-notch-small: 6px;
  --pb-notch-button: 8px;
  --pb-notch-card: 10px;
  --pb-notch-large: 12px;
  --pb-notch-hero: 14px;
  /* Spacing */
  --pb-gutter: 18px;
  --pb-bottom-pad: 30px;
  --pb-content-max: 640px;
  --pb-card-pad: 14px;
  --pb-toggle-row-pad: 12px;
  --pb-target-row-pad: 10px;
  --pb-stack: 14px;
  --pb-hub: 12px;
  --pb-chip: 34px;
  --pb-tile: 48px;
  --pb-section-top: 18px;
  --pb-section-bottom: 6px;
  --pb-title-top: 18px;
  --pb-title-bottom: 10px;
  --pb-accent-bar: 2px;
  --pb-accent-bar-inset: 80px;
  --pb-hairline: 1px;
  /* Motion */
  --pb-press: 120ms;
  --pb-pulse: 700ms;
  --pb-rings: 1400ms;
}