/* Webfonts. Eczar (display), Work Sans (UI/body), Space Mono (code/labels).
   Served from Google Fonts CDN - the @font-face rules Google returns declare the shipped faces.
   To self-host, replace this @import with local @font-face rules pointing at assets/fonts/. */
@import url('https://fonts.googleapis.com/css2?family=Eczar:wght@500;600;700&family=Work+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* --- tokens/colors.css --- */
/* Color tokens - dark base with the cyan→magenta brand spectrum. */
:root {
  /* Brand spectrum (the escaping-pixels gradient, left → right) */
  --bb-cyan:    #17c9e6;
  --bb-blue:    #2d71ea;
  --bb-indigo:  #3417e6;
  --bb-purple:  #a62dea;
  --bb-magenta: #e617c9;

  /* Signature gradients */
  --bb-grad-brand:          linear-gradient(100deg, #17c9e6, #2d71ea, #3417e6, #a62dea, #e617c9);
  --bb-grad-cyan-blue:      linear-gradient(135deg, #17c9e6, #2d71ea);
  --bb-grad-purple-magenta: linear-gradient(135deg, #a62dea, #e617c9);
  --bb-grad-wordmark:       linear-gradient(90deg, #17c9e6, #2d71ea, #a62dea);

  /* Neutral surfaces (cool near-black) */
  --bb-bg:           #0a0b12;
  --bb-panel:        #14161f;
  --bb-panel-raised: #1b1e29;

  /* Hairlines */
  --bb-border:        rgba(255,255,255,0.09);
  --bb-border-strong: rgba(255,255,255,0.14);

  /* Text */
  --bb-text:       #eef1f7;
  --bb-text-body:  #a7adbe;
  --bb-text-muted: #9aa0b2;
  --bb-text-faint: #6b7183;

  /* Status */
  --bb-online:  #1fbf6b;
  --bb-danger:  #e08a8a;
}

/* --- tokens/typography.css --- */
/* Type tokens. Eczar for display, Work Sans for UI/body, Space Mono for codes & labels. */
:root {
  --bb-font-display: 'Eczar', Georgia, serif;
  --bb-font-ui:      'Work Sans', system-ui, -apple-system, sans-serif;
  --bb-font-mono:    'Space Mono', ui-monospace, monospace;

  /* Display / heading sizes (fluid) */
  --bb-text-hero:    clamp(56px, 10vw, 116px);
  --bb-text-h1:      clamp(30px, 4vw, 44px);
  --bb-text-h2:      clamp(26px, 3.5vw, 38px);
  --bb-text-h3:      22px;

  /* Body / UI */
  --bb-text-lead:    clamp(17px, 2.2vw, 21px);
  --bb-text-body-sz: 15px;
  --bb-text-ui:      14px;

  /* Mono label (eyebrows, pills, codes) */
  --bb-text-label:   11px;
  --bb-label-track:  1.5px;
}

/* --- tokens/spacing.css --- */
/* Spacing scale. */
:root {
  --bb-space-2xs: 6px;
  --bb-space-xs:  8px;
  --bb-space-sm:  12px;
  --bb-space-md:  16px;
  --bb-space-lg:  24px;
  --bb-space-xl:  34px;
  --bb-space-2xl: 56px;
  --bb-space-section: 84px;

  --bb-maxw-content: 1180px;
  --bb-maxw-prose:   620px;
}

/* --- tokens/radii.css --- */
/* Corner radii. */
:root {
  --bb-radius-control: 10px;  /* buttons, inputs */
  --bb-radius-tile:    14px;  /* small tiles, code blocks */
  --bb-radius-panel:   16px;  /* section panels */
  --bb-radius-card:    20px;  /* module cards, hero join */
  --bb-radius-pill:    999px;
}

/* --- tokens/shadows.css --- */
/* Elevation & glow. */
:root {
  --bb-shadow-card:   0 24px 60px -30px rgba(0,0,0,0.8);
  --bb-shadow-pop:    0 10px 30px -12px rgba(23,201,230,0.7);

  /* Accent glows - use under gradient tiles/buttons */
  --bb-glow-cyan:    0 12px 30px -10px #2d71ea;
  --bb-glow-magenta: 0 12px 30px -10px #a62dea;

  /* Focus ring for inputs */
  --bb-focus-ring: 0 0 0 3px rgba(45,113,234,0.25);
}

/* --- tokens/animations.css --- */
/* Motion - the floating "escaping pixel" keyframes used by PixelField. */
@keyframes bb-float {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-26px) rotate(9deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@keyframes bb-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.95; }
}

/* --- shell.css --- */
/* Page-shell layout primitive, not a token - see the design system's
   src/shell.css for the full explanation. */
.bb-mount-fill { display: contents; }