@layer base, surfaces, controls;
/* zuzu v4: the creature behind frosted glass, ink as the one action, no hue in the UI,
   glass only for chrome. Values come from assets/zuzu-handoff/tokens.css; the handbook
   (docs/design-system.md) records the practical deviations: status text uses darker
   production shades so every tint pairing reaches 4.5:1. */
:root {
  color-scheme: light;
  --zoozoo-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Geist Variable", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --zoozoo-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* Surfaces: a flat grey ground, white cards, grey tiles and tints. */
  --zoozoo-canvas: #f5f5f7;
  --zoozoo-surface: #ffffff;
  --zoozoo-surface-raised: #ffffff;
  --zoozoo-tile: #f5f5f7;
  --zoozoo-tint: #e8e8ed;
  --zoozoo-tint-strong: #d2d2d7;
  --zoozoo-border: #e8e8ed;
  --zoozoo-hairline: rgb(128 128 136 / 28%);
  --zoozoo-input-border: #85858a;
  /* Text */
  --zoozoo-ink: #1d1d1f;
  --zoozoo-muted: #6e6e73;
  --zoozoo-text-3: #86868b;
  --zoozoo-text-disabled: #aeaeb2;
  /* The one action is ink, with paper text on it. Links and focus are ink too. */
  --zoozoo-accent: #1d1d1f;
  --zoozoo-accent-hover: #2c2c2e;
  --zoozoo-accent-active: #000000;
  --zoozoo-on-accent: #f5f5f7;
  --zoozoo-link: #1d1d1f;
  --zoozoo-focus: #1d1d1f;
  /* Status appears only as a tint with explicit text. */
  --zoozoo-success: #226c3e;
  --zoozoo-success-tint: #e6f6ec;
  --zoozoo-danger: #b52e2e;
  --zoozoo-danger-tint: #fdecec;
  --zoozoo-warning: #964309;
  --zoozoo-warning-tint: #fbe9dc;
  /* Glass is for chrome only: the sidebar, dock, top buttons, chips and sheets. */
  --zoozoo-glass: rgb(255 255 255 / 60%);
  --zoozoo-glass-on: rgb(255 255 255 / 92%);
  --zoozoo-glass-rim: rgb(255 255 255 / 80%);
  --zoozoo-glass-edge: rgb(0 0 0 / 6%);
  --zoozoo-glass-blur: blur(24px) saturate(1.8);
  --zoozoo-overlay: rgb(29 29 31 / 40%);
  --zoozoo-stage: radial-gradient(70% 65% at 50% 42%, #ffffff, #f1ece3 80%);
  --zoozoo-glow: radial-gradient(closest-side, #ffffff, rgb(255 255 255 / 0%));
  /* Shape and depth: pills, 12px fields, 20px cards, 28px heroes; soft shadows, no borders. */
  --zoozoo-control-height: 48px;
  --zoozoo-control-padding: 12px 20px;
  --zoozoo-radius-control: 999px;
  --zoozoo-radius-field: 12px;
  --zoozoo-radius-row: 10px;
  --zoozoo-radius-card: 20px;
  --zoozoo-radius-hero: 28px;
  --zoozoo-shadow: 0 1px 2px rgb(0 0 0 / 4%), 0 12px 40px rgb(0 0 0 / 6%);
  --zoozoo-shadow-pop: 0 2px 6px rgb(0 0 0 / 6%), 0 24px 64px rgb(0 0 0 / 12%);
  --zoozoo-shadow-glass: inset 0 1px 0 var(--zoozoo-glass-rim), 0 1px 2px rgb(0 0 0 / 5%), 0 8px 24px rgb(0 0 0 / 8%);
  --zoozoo-space-1: 4px;
  --zoozoo-space-2: 8px;
  --zoozoo-space-3: 12px;
  --zoozoo-space-4: 16px;
  --zoozoo-space-6: 24px;
  --zoozoo-space-8: 32px;
  --zoozoo-space-12: 48px;
  --zoozoo-duration: 200ms;
  --zoozoo-duration-fast: 120ms;
  --zoozoo-duration-slow: 320ms;
  --zoozoo-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --zoozoo-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --zoozoo-sidebar: 264px;
  --zoozoo-content: 1120px;
  --bg: var(--zoozoo-canvas);
  --ink: var(--zoozoo-ink);
  --muted: var(--zoozoo-muted);
  --line: var(--zoozoo-border);
  --green: var(--zoozoo-link);
}
/* Desktop opts in explicitly. Other surfaces keep the light root tokens. The accent flips to
   paper with ink text; the character keeps its light window, a lit glass tile on black. */
[data-zoozoo-theme="dark"] {
  color-scheme: dark;
  color: var(--zoozoo-ink);
  --zoozoo-canvas: #000000;
  --zoozoo-surface: #1c1c1e;
  --zoozoo-surface-raised: #2c2c2e;
  --zoozoo-tile: #2c2c2e;
  --zoozoo-tint: #2c2c2e;
  --zoozoo-tint-strong: #38383a;
  --zoozoo-border: #38383a;
  --zoozoo-hairline: rgb(128 128 136 / 36%);
  --zoozoo-input-border: #8e8e93;
  --zoozoo-ink: #f5f5f7;
  --zoozoo-muted: #a1a1a6;
  --zoozoo-text-3: #86868b;
  --zoozoo-text-disabled: #636366;
  --zoozoo-accent: #f5f5f7;
  --zoozoo-accent-hover: #e8e8ed;
  --zoozoo-accent-active: #d2d2d7;
  --zoozoo-on-accent: #1d1d1f;
  --zoozoo-link: #f5f5f7;
  --zoozoo-focus: #f5f5f7;
  --zoozoo-success: #9cdbb6;
  --zoozoo-success-tint: #13301f;
  --zoozoo-danger: #ffadb4;
  --zoozoo-danger-tint: #351616;
  --zoozoo-warning: #edcc87;
  --zoozoo-warning-tint: #3a2410;
  --zoozoo-glass: rgb(70 70 76 / 42%);
  --zoozoo-glass-on: rgb(70 70 76 / 72%);
  --zoozoo-glass-rim: rgb(255 255 255 / 18%);
  --zoozoo-glass-edge: rgb(0 0 0 / 40%);
  --zoozoo-overlay: rgb(0 0 0 / 60%);
  --zoozoo-stage: radial-gradient(70% 65% at 50% 42%, #3a3a3c, #1c1c1e 80%);
  --zoozoo-glow: radial-gradient(closest-side, #2c2c2e, rgb(44 44 46 / 0%));
  --zoozoo-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 12px 40px rgb(0 0 0 / 40%);
  --zoozoo-shadow-pop: 0 2px 6px rgb(0 0 0 / 40%), 0 24px 64px rgb(0 0 0 / 60%);
  --bg: var(--zoozoo-canvas);
  --ink: var(--zoozoo-ink);
  --muted: var(--zoozoo-muted);
  --line: var(--zoozoo-border);
  --green: var(--zoozoo-link);
}
/* The brand lockup: the app icon beside the lowercase type wordmark. */
.zoozoo-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--zoozoo-ink);
  font: 600 22px/1 var(--zoozoo-font);
  letter-spacing: -0.05em;
  white-space: nowrap;
}
.zoozoo-appicon {
  display: inline-flex;
  flex: none;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 8%));
}
.zoozoo-mascot {
  flex: none;
  display: block;
}
@layer base {
  /* Focus is a 2px ink ring with a 2px gap, never the browser default. */
  :where(button, a, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--zoozoo-focus);
    outline-offset: 2px;
  }
}
::selection {
  background: var(--zoozoo-tint-strong);
  color: var(--zoozoo-ink);
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.zoozoo-brand .zoozoo-wordmark {
  font-weight: 600;
  letter-spacing: -0.05em;
}