/*
 * BeeBrands design tokens — the ONE place the palette, spacing and type live.
 *
 * The specification's palette: white, light grey, yellow, orange, purple,
 * blue and sea blue, all pastels; flat UI. The marketing site (beebrand.us)
 * links this same file, so the two never drift (Phase 22: "shares the design
 * tokens with the panel, and nothing else").
 *
 * The traffic lights are the one place colour carries MEANING, so they are
 * saturated enough to read at a glance and are never the only signal — every
 * light also carries a text label for colour-blind users and screen readers.
 */
:root {
  /* Surfaces */
  --bb-white: #ffffff;
  --bb-grey-50: #f7f8fa;
  --bb-grey-100: #eef0f4;
  --bb-grey-200: #e2e5eb;
  --bb-grey-400: #a3a9b5;
  --bb-grey-600: #5f6674;
  --bb-ink: #22262e;

  /* The pastels */
  --bb-yellow: #fff1c2;
  --bb-honey: #f5c542;
  --bb-honey-deep: #d9a514;
  --bb-orange: #ffdcc2;
  --bb-purple: #e8e0fa;
  --bb-purple-deep: #6d55c2;
  --bb-blue: #dbe8fd;
  --bb-blue-deep: #3569c9;
  --bb-sea: #d3f1ec;
  --bb-sea-deep: #1f8a7a;

  /* Traffic lights */
  --bb-green-light: #3fb68b;
  --bb-yellow-light: #e8b412;
  --bb-red-light: #e05252;
  --bb-none-light: #c4c9d2;

  /* Roles */
  --bb-bg: var(--bb-white);
  --bb-surface: var(--bb-grey-50);
  --bb-line: var(--bb-grey-200);
  --bb-text: var(--bb-ink);
  --bb-muted: var(--bb-grey-600);
  --bb-accent: var(--bb-honey);
  --bb-accent-ink: #3b2e00;
  --bb-link: var(--bb-blue-deep);
  --bb-focus: #8fb4f7;
  --bb-danger: var(--bb-red-light);

  /* Type */
  --bb-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --bb-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --bb-size-xs: 0.75rem;
  --bb-size-sm: 0.875rem;
  --bb-size-md: 1rem;
  --bb-size-lg: 1.25rem;
  --bb-size-xl: 1.6rem;

  /* Space, radius, motion */
  --bb-space-1: 4px;
  --bb-space-2: 8px;
  --bb-space-3: 12px;
  --bb-space-4: 16px;
  --bb-space-5: 24px;
  --bb-space-6: 32px;
  --bb-radius: 10px;
  --bb-radius-sm: 6px;
  --bb-header-h: 56px;
  --bb-nav-w: 272px;
  --bb-ease: 140ms ease;
}