/* Solid Busker — brand tokens.
 *
 * This is the ONE file to edit when the brand changes. Colour, type, shape and
 * motion are all here as custom properties; every other stylesheet reads them
 * and defines none of its own. Change a value here and it changes everywhere.
 *
 * The human manual is docs/brand-guide.md. The decision is docs/adr/0016.
 *
 * Loaded first by config/templates/base.html, so the tokens exist before every
 * component stylesheet, including brand.css and landing.css.
 */

:root {
  /* ----------------------------------------------------------------------
     COLOUR — the accent
     One warm ramp, coral into amber. It is the only saturated thing on any
     screen, so wherever it appears it reads as "this is the next thing to do".
     `--sb-glow` is the gradient form for solid fills (buttons, the brand mark);
     the flat stops are for text and borders.
     ---------------------------------------------------------------------- */
  --sb-accent: #ff5f45; /* coral  — the cool end of the ramp */
  --sb-accent-warm: #ffa62b; /* amber  — the warm end, and the accent for text on dark */
  --sb-accent-ink: #7a1f10; /* the accent darkened until it is legible as body-size text on light */
  --sb-glow: linear-gradient(135deg, var(--sb-accent) 0%, var(--sb-accent-warm) 100%);

  /* ----------------------------------------------------------------------
     COLOUR — neutrals, light scheme (the default)
     Redefined for dark below. Never hard-code these hex values anywhere else.
     ---------------------------------------------------------------------- */
  --sb-ink: #0f1216; /* primary text */
  --sb-ink-soft: #5a626e; /* secondary text, captions */
  --sb-line: #e6e8ec; /* hairlines, borders */
  --sb-surface: #ffffff; /* raised card */
  --sb-surface-sunk: #f4f5f7; /* page background */
  --sb-shadow: 0 1px 2px rgba(15, 18, 22, 0.04), 0 12px 28px -12px rgba(15, 18, 22, 0.18);
  --sb-shadow-lift: 0 2px 4px rgba(15, 18, 22, 0.05), 0 24px 48px -20px rgba(15, 18, 22, 0.35);

  /* ----------------------------------------------------------------------
     COLOUR — fixed night
     A dark set that does NOT follow the colour scheme. Used by surfaces that
     are always dark by design: the pre-launch landing page, and the support
     panel (ADR-0011). Keeping it as its own ramp is what stops a
     `--sb-ink`-based surface turning white-on-white in dark mode.
     ---------------------------------------------------------------------- */
  --sb-night: #0d1117; /* the ground */
  --sb-night-raised: #161b22; /* a panel lifted off the ground */
  --sb-night-ink: #f4f6f8; /* primary text on night */
  --sb-night-ink-soft: rgba(244, 246, 248, 0.72); /* secondary text on night */
  --sb-night-line: rgba(244, 246, 248, 0.22); /* hairlines on night */

  /* ----------------------------------------------------------------------
     TYPOGRAPHY — two slots
     `--sb-font-sans`    everything.
     `--sb-font-display` large headings. Points at the sans stack today: ADR-0011
                         and ADR-0016 keep the product on system type (no web
                         font to download or fail before first paint). To adopt
                         a display face later: add one @font-face, then change
                         this one line. See docs/brand-guide.md §"Add a display
                         font".
     ---------------------------------------------------------------------- */
  --sb-font-sans:
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans",
    sans-serif;
  --sb-font-display: var(--sb-font-sans);

  --sb-tracking-tight: -0.03em; /* headings */
  --sb-tracking-wide: 0.16em; /* eyebrows, small caps */

  /* ----------------------------------------------------------------------
     SHAPE
     ---------------------------------------------------------------------- */
  --sb-radius: 1rem;
  --sb-radius-sm: 0.625rem;
  --sb-radius-pill: 999px;

  /* ----------------------------------------------------------------------
     MOTION
     One easing curve, one duration. `reduce` is honoured at the component.
     ---------------------------------------------------------------------- */
  --sb-ease: cubic-bezier(0.2, 0.75, 0.25, 1);
  --sb-transition: 180ms var(--sb-ease);
}

@media (prefers-color-scheme: dark) {
  :root {
    --sb-ink: #f2f4f7;
    --sb-ink-soft: #9aa3b2;
    --sb-line: #262c35;
    --sb-surface: #161b22;
    --sb-surface-sunk: #0d1117;
    --sb-accent-ink: #ffb59f; /* the light-mode accent-ink is too dark to read on a dark surface */
    --sb-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 28px -12px rgba(0, 0, 0, 0.8);
    --sb-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.5), 0 24px 48px -20px rgba(0, 0, 0, 0.9);
  }
}