/* Bridge — generated from tokens.json */
:root, [data-theme="dark"] {
  --wall-base: #0b0e16;
  --glass: rgba(14, 14, 20, 0.40);   /* smoky, nearly neutral, see-through (the F1 look, Nov 6, 2026) */
  --glass-lift: rgba(255, 255, 255, 0.08);
  --glass-lift-strong: rgba(255, 255, 255, 0.14);
  --glass-inset: rgba(255, 255, 255, 0.05);
  --glass-edge: rgba(255, 255, 255, 0.16);
  --glass-light: rgba(255, 255, 255, 0.24);
  --scrim: rgba(5, 7, 12, 0.55);
  --ink: #f4f6fb;
  --ink-muted: #aeb6c7;
  --ink-faint: #7c859a;
  --accent: #8b6dff;   /* the Mt. Fuji wallpaper's violet, white text on it (was blue #0a84ff, teal before) */
  --on-accent: #ffffff;
  --on-image: #ffffff;   /* text drawn over pictures (a cover's name over its art) */
  --web-page: #ffffff;   /* behind web content until it paints (an extension's popup), as web pages start white */
  --accent-2: #6a45e8;   /* the deep violet: the second stop of every accent gradient */
  --accent-rgb: 139, 109, 255;   /* the accent as numbers, for glows (follows Appearance › Theme) */
  --accent-light-rgb: 232, 224, 255;   /* the accent mixed toward white: the neon edge's core line */
  --on-accent-2: #ffffff;
  --success: #5ee6a0;
  --warning: #ffc24d;
  --danger: #ff7a7a;
  /* Layered shadows (soft, mid, tight at the edge), and a crisp rim that catches the light along the top. Every shadow
     fits the room it has, so none is ever cut off: a flyout or menu has 40px around its panel (offset + blur <= 40). */
  --shadow-glass: 0 10px 22px rgba(0, 0, 0, 0.22), 0 3px 8px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.10);
  --shadow-float: 0 12px 24px rgba(0, 0, 0, 0.26), 0 4px 10px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.10);
  --shadow-edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius: 16px;
  --radius-round: 999px;
  --size-control-sm: 32px;
  --size-control: 40px;
  --size-control-lg: 52px;
  --size-hero-search: 58px;
  --size-icon: 18px;
  --size-touch: 44px;
  --size-phone-bar: 60px;
  --blur-glass: 12px;
  --blur-glass-saturate: 1.4;
  --blur-standalone: 12px;
  --glass-luminosity-dark: rgba(14, 14, 20, 0.55);
  --glass-luminosity-light: rgba(255, 255, 255, 0.50);
  --font-display: Geist, "Segoe UI", sans-serif;
  --font-text: Geist, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", Consolas, monospace;
  --font-brand: "Chakra Petch", Geist, sans-serif;
}
.clock { font-family: var(--font-display); font-size: 120px; line-height: 1; font-weight: 300; letter-spacing: -4px; }
.title { font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.5px; }
.wordmark { font-family: var(--font-brand); font-size: 16px; line-height: 20px; font-weight: 400; letter-spacing: 1.6px; }
.heading { font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 600; }
.tab { font-family: var(--font-display); font-size: 14px; line-height: 20px; font-weight: 500; }
.label { font-family: var(--font-display); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.8px; }
.body { font-family: var(--font-text); font-size: 14px; line-height: 20px; font-weight: 400; }
.body-strong { font-family: var(--font-text); font-size: 14px; line-height: 20px; font-weight: 600; }
.caption { font-family: var(--font-text); font-size: 12px; line-height: 16px; font-weight: 400; }
.numeric { font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 500; }
.stat { font-family: var(--font-mono); font-size: 20px; line-height: 24px; font-weight: 600; }