/* ============================================================
   Buddy Arcade: design tokens
   Palette extracted 1:1 from brand/buddy-mark.svg
   Do not add colors outside this file.
   ============================================================ */
:root {
  /* --- Brand: hexagon facets, from the darkest to cyan --- */
  --bd-blue-700: #1A67FD;
  --bd-blue-600: #1877FD;
  --bd-blue-500: #1A86FD;  /* primary, the mark's body color */
  --bd-blue-400: #0DA7FE;
  --bd-cyan-300: #05BBFF;
  --bd-cyan-200: #00C9FF;
  --bd-ice:      #D6FFFF;  /* the lightest accent from the mark */
  --bd-ink:      #0A0D16;  /* wordmark / text */

  /* --- Neutrals, derived from --bd-ink (same hue) --- */
  --bd-n-900: #0A0D16;
  --bd-n-800: #141926;
  --bd-n-700: #1E2436;
  --bd-n-600: #2C3450;
  --bd-n-500: #4A5578;
  --bd-n-400: #7C87A8;
  --bd-n-300: #B4BDD4;
  --bd-n-200: #DCE2EE;
  --bd-n-100: #EEF2F9;
  --bd-n-050: #F7F9FC;
  --bd-white: #FFFFFF;

  /* --- Semantic (CI/CD: pass / fail / pending) --- */
  --bd-pass:  #16C79A;
  --bd-warn:  #FFB020;

  /* Color of Buddy's "Wait for approval" action. Not part of the brand palette,
     but part of the product language: this is how that action looks in pipelines. */
  --bd-approve-1: #F869C8;
  --bd-approve-2: #EE3897;

  /* Colors of the other Buddy actions used as pickups in the games:
     publish artifact (yellow-orange) and sandbox (green). */
  --bd-artifact-1: #FFD500;
  --bd-artifact-2: #FF8600;
  --bd-sandbox:    #6AD147;

  /* Buddy's status dot colors (status_icon_success / _failed). These sit next to
     actions in the run view, so the game uses exactly the same ones. */
  --bd-status-ok:   #22CE5B;
  --bd-status-fail: #F20D69;
  --bd-fail:  #FF4D5E;

  /* --- Brand gradients --- */
  --bd-grad-mark: linear-gradient(135deg, var(--bd-blue-700) 0%, var(--bd-blue-500) 45%, var(--bd-cyan-200) 100%);
  --bd-grad-sky:  linear-gradient(180deg, var(--bd-ice) 0%, var(--bd-n-050) 100%);
  --bd-grad-deep: linear-gradient(180deg, var(--bd-n-900) 0%, var(--bd-n-700) 100%);

  /* --- Semantic roles: LIGHT (default) --- */
  --bg:          var(--bd-n-050);
  --bg-elev:     var(--bd-white);
  --bg-sunk:     var(--bd-n-100);
  --fg:          var(--bd-n-900);
  --fg-muted:    var(--bd-n-500);
  --fg-faint:    var(--bd-n-400);
  --border:      var(--bd-n-200);
  --border-strong: var(--bd-n-300);
  --accent:      var(--bd-blue-500);
  --accent-fg:   var(--bd-white);
  --accent-soft: rgba(26, 134, 253, 0.10);
  --ring:        rgba(26, 134, 253, 0.45);
  --shadow-sm:   0 1px 2px rgba(10, 13, 22, 0.06), 0 1px 3px rgba(10, 13, 22, 0.10);
  --shadow-md:   0 4px 12px rgba(10, 13, 22, 0.08), 0 2px 4px rgba(10, 13, 22, 0.06);
  --shadow-lg:   0 18px 40px rgba(10, 13, 22, 0.14);

  /* --- Scale / rhythm --- */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 18px;  --r-pill: 999px;
  --font: ui-sans-serif, -apple-system, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --- Semantic roles: DARK --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          var(--bd-n-900);
    --bg-elev:     var(--bd-n-800);
    --bg-sunk:     #070A11;
    --fg:          var(--bd-n-100);
    --fg-muted:    var(--bd-n-400);
    --fg-faint:    var(--bd-n-500);
    --border:      var(--bd-n-700);
    --border-strong: var(--bd-n-600);
    --accent:      var(--bd-blue-400);
    --accent-fg:   var(--bd-n-900);
    --accent-soft: rgba(13, 167, 254, 0.14);
    --ring:        rgba(13, 167, 254, 0.50);
    --shadow-sm:   0 1px 2px rgba(0,0,0,.5);
    --shadow-md:   0 4px 14px rgba(0,0,0,.5);
    --shadow-lg:   0 18px 44px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --bg: var(--bd-n-900); --bg-elev: var(--bd-n-800); --bg-sunk: #070A11;
  --fg: var(--bd-n-100); --fg-muted: var(--bd-n-400); --fg-faint: var(--bd-n-500);
  --border: var(--bd-n-700); --border-strong: var(--bd-n-600);
  --accent: var(--bd-blue-400); --accent-fg: var(--bd-n-900);
  --accent-soft: rgba(13,167,254,.14); --ring: rgba(13,167,254,.50);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow-md: 0 4px 14px rgba(0,0,0,.5);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.6);
}

/* ============================================================
   Base + shared UI components (use these, do not write your own)
   ============================================================ */
* { box-sizing: border-box; }
/* Components like .bd-btn use display: inline-flex, which beats the default [hidden]
   from the UA stylesheet; without this a button with the hidden attribute still renders. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
h1,h2,h3 { margin: 0; font-weight: 650; letter-spacing: -0.02em; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

.bd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border: 1px solid var(--border);
  border-radius: var(--r-pill); background: var(--bg-elev); color: var(--fg);
  font: inherit; font-weight: 600; cursor: pointer; user-select: none;
  box-shadow: var(--shadow-sm); transition: transform .12s var(--ease), background .15s, border-color .15s;
}
.bd-btn:hover { border-color: var(--border-strong); }
.bd-btn:active { transform: translateY(1px) scale(.985); }
.bd-btn--primary { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
.bd-btn--ghost { background: transparent; box-shadow: none; }
.bd-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: transparent; }

.bd-card {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
}
.bd-hud {
  display: flex; align-items: center; gap: 0;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--r-pill); box-shadow: var(--shadow-md); padding: 8px 6px;
}
.bd-hud__cell { padding: 2px 18px; text-align: center; border-right: 1px solid var(--border); }
.bd-hud__cell:last-child { border-right: 0; }
.bd-hud__k { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); font-weight: 700; }
.bd-hud__v { font-family: var(--mono); font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bd-mark { width: 32px; height: 36px; display: block; flex: none; }

.bd-overlay {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(10px); z-index: 40; text-align: center; padding: 24px;
}
.bd-overlay[hidden] { display: none; }
/* fixed + offsets: absolute without offsets lands in normal flow and stretches the document
   (e.g. by 16 px below a 100dvh layout, producing a scrollbar out of nowhere). */
.bd-sr { position: fixed; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}