/* ============================================================================
   BIKEAXO get your bike position — Design Tokens
   Source: source_examples/design-system.html (captured brand + UI showcase)
   Paste/import this verbatim into every BIKEAXO artifact, then build with the
   tokens. Whitelabel = override --accent / --accent-2 (maps to api/brand.config.php).

   No brand font files were captured, so typography is declared as stacks
   (Gagalin / Sofia Pro / JetBrains Mono) with system fallbacks rather than
   @font-face. If font files are later added under fonts/, bind them here with
   @font-face and the stacks will pick them up automatically.
   ========================================================================= */

:root {
  /* ── Brand / accent ───────────────────────────────────────────────────── */
  --accent:   #E1FF00;            /* Neon-Gelb · primary accent / the "X" / CTAs */
  --accent-2: #00E5FF;            /* Neon-Blau · links / focus / secondary       */
  --brand:    #00AEEF;            /* Marken-Blau · legacy connective             */

  /* on-accent text colors (intentionally near-black for contrast) */
  --on-accent:   #10140F;
  --on-accent-2: #04212A;

  /* ── Surfaces & text (dark = native) ──────────────────────────────────── */
  --bg:        #14181D;           /* page background · "Deep"        */
  --surface:   #23272E;           /* cards / panels · Anthrazit      */
  --surface-2: #2E343C;           /* inputs / tracks / raised wells  */
  --line:      rgba(255,255,255,.10); /* hairline borders / dividers */
  --text:      #F2F5F7;           /* primary text · Off-White        */
  --muted:     #9FB0C0;           /* secondary text / labels         */
  --dim:       #909EAC;           /* captions / footnotes (WCAG-AA ≥4.5:1 on bg/surface/surface-2) */
  --disabled:  #6C7A89;           /* disabled text only (contrast-exempt per WCAG 1.4.3) */

  /* ── Status ───────────────────────────────────────────────────────────── */
  --ok:   #16C43A;
  --warn: #FF8A00;
  --err:  #FF4D4D;

  /* ── Radius ───────────────────────────────────────────────────────────── */
  --r:    14px;                   /* inputs, swatches, app-bar */
  --r-lg: 22px;                   /* cards, boards, themes     */
  --r-pill: 999px;                /* buttons, chips            */

  /* ── Spacing scale (observed) ─────────────────────────────────────────── */
  --sp-1: 6px;  --sp-2: 8px;  --sp-3: 10px; --sp-4: 12px; --sp-5: 14px;
  --sp-6: 18px; --sp-7: 22px; --sp-8: 24px; --sp-9: 28px;
  --sp-section: 54px; --sp-header: 70px;
  --container: 1080px;
  --gutter: 28px;

  /* ── Focus ring ───────────────────────────────────────────────────────── */
  --focus-ring: 0 0 0 3px rgba(0,229,255,.18);

  /* ── Type stacks ──────────────────────────────────────────────────────── */
  --f-display: "Gagalin","Cocogoose Classic","Arial Black",system-ui,sans-serif;
  --f-ui:      "Sofia Pro","Inter","Manrope",system-ui,-apple-system,sans-serif;
  --f-mono:    "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ── Type scale ───────────────────────────────────────────────────────── */
  --fs-hero: clamp(34px, 6vw, 68px);
  --fs-h2: 13px;
  --fs-kicker: 11px;
  --fs-lead: 16px;
  --fs-body: 14px;
}

/* ── Whitelabel example (override only accents per studio) ──────────────────
   .theme-studio-x { --accent:#FF5A1F; --accent-2:#1FA2FF; --on-accent:#1A0A04; }
   --------------------------------------------------------------------------- */

/* ── Optional helper primitives (reusable across artifacts) ─────────────── */
.bx-display { font-family: var(--f-display); font-weight: 800; letter-spacing: .02em; }
.bx-ui      { font-family: var(--f-ui); }
.bx-mono    { font-family: var(--f-mono); }

.bx-kick {
  font-size: var(--fs-kicker); font-weight: 600; text-transform: uppercase;
  letter-spacing: .18em; color: var(--muted);
}
.bx-h2 {
  font-size: var(--fs-h2); font-weight: 700; text-transform: uppercase;
  letter-spacing: .16em; color: var(--muted);
}

.bx-btn {
  display: inline-flex; align-items: center; gap: 8px; border: 0;
  border-radius: var(--r-pill); font: 700 var(--fs-body)/1 var(--f-ui);
  padding: 13px 26px; cursor: pointer; transition: filter .15s ease, transform .15s ease;
}
.bx-btn:hover { filter: brightness(1.06); }
.bx-btn:active { transform: translateY(1px); }
.bx-btn:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.bx-btn[disabled], .bx-btn:disabled, .bx-btn[aria-disabled="true"] {
  opacity: .45; filter: none; transform: none; cursor: not-allowed;
}
.bx-btn[aria-busy="true"] { cursor: progress; }
.bx-btn-primary   { background: var(--accent);   color: var(--on-accent); }
.bx-btn-blue      { background: var(--accent-2);  color: var(--on-accent-2); }
.bx-btn-secondary { background: transparent; color: var(--text); border: 1.5px solid var(--line); }
.bx-btn-secondary:hover { filter: none; border-color: var(--accent-2); }
.bx-btn-ghost     { background: transparent; color: var(--accent-2); border: 1.5px solid var(--accent-2); }

.bx-input {
  width: 100%; background: var(--surface-2); border: 1.5px solid var(--line);
  border-radius: 12px; color: var(--text); padding: 13px 15px;
  font: 500 var(--fs-body) var(--f-ui);
}
.bx-input::placeholder { color: var(--dim); }
.bx-input:focus { outline: 0; border-color: var(--accent-2); box-shadow: var(--focus-ring); }
.bx-input[aria-invalid="true"] { border-color: var(--err); box-shadow: 0 0 0 3px rgba(255,77,77,.18); }

/* Native-styled select that matches .bx-input */
.bx-select {
  background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 12px;
  color: var(--text); padding: 13px 15px; font: 600 var(--fs-body) var(--f-ui); cursor: pointer;
}
.bx-select:focus-visible { outline: 0; border-color: var(--accent-2); box-shadow: var(--focus-ring); }

/* Inline form error text */
.bx-error { display: flex; align-items: center; gap: 6px; color: var(--err); font-size: 13px; font-weight: 600; }

/* Skeleton loading block (shimmer auto-disabled under reduced-motion below) */
.bx-skeleton { position: relative; overflow: hidden; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-lg); }
.bx-skeleton::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  transform: translateX(-100%); animation: bx-shimmer 1.2s linear infinite; }
@keyframes bx-shimmer { to { transform: translateX(100%); } }

/* Focus-visible safety net for inline-styled controls (sidebar, list rows, pills) */
:where(a[href], button, select, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-2); outline-offset: 2px;
}

.bx-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 24px;
}

.bx-chip {
  display: inline-flex; align-items: center; padding: 6px 14px;
  border-radius: var(--r-pill); font-size: 12px; font-weight: 600;
  border: 1px solid var(--line); color: var(--muted);
}
.bx-chip.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}