/* ============================================================
   arena_ds.css — Arena base layer (primitives + resets + interaction states)
   ------------------------------------------------------------
   Post DiveOS-port cleanup: all colour ramps and semantic colour
   tokens now live in tokens.css (the DiveOS source of truth). This
   file keeps only what tokens.css does NOT provide — the spacing /
   type / layout primitives the inline styles use — plus the base
   element resets and the .ao-* interaction-state classes. Colour
   references below point at DiveOS tokens.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---------- Type scale / weights / rhythm (tokens.css has fonts) ---------- */
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800; --fw-black:900;
  --text-2xs:0.6875rem; --text-xs:0.75rem; --text-sm:0.8125rem; --text-base:0.875rem;
  --text-md:1rem; --text-lg:1.125rem; --text-xl:1.375rem;
  --display-sm:1.75rem; --display-md:2.25rem; --display-lg:3rem; --display-xl:4rem;
  --lh-tight:1.1; --lh-snug:1.25; --lh-normal:1.5; --lh-relaxed:1.65;
  --ls-tighter:-0.02em; --ls-tight:-0.01em; --ls-normal:0; --ls-wide:0.02em; --ls-wider:0.06em; --ls-widest:0.12em;
  --role-eyebrow-size:var(--text-2xs); --role-eyebrow-weight:var(--fw-bold); --role-eyebrow-spacing:var(--ls-wider);
  --role-data-family:var(--font-mono); --role-data-size:var(--text-sm); --role-data-spacing:var(--ls-tight);

  /* ---------- Spacing & layout ---------- */
  --space-0:0; --space-px:1px; --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-7:2rem; --space-8:2.5rem; --space-9:3rem; --space-10:4rem; --space-12:6rem;
  --gutter:var(--space-6); --page-pad-x:var(--space-8); --page-pad-y:var(--space-7); --field-pad-x:var(--space-4);
  --control-h:2.5rem; --control-h-sm:2rem; --control-h-lg:3rem; --touch-min:2.75rem;
  --sidebar-w-collapsed:72px; --topbar-h:64px; --content-max:1440px;

  /* ---------- Radii / shadows / motion not in tokens.css ---------- */
  --radius-xs:4px; --radius-2xl:28px; --radius-circle:50%;
  --shadow-xs:0 1px 2px rgba(13,27,42,0.06);
  --shadow-lg:0 12px 28px rgba(13,27,42,0.12),0 4px 10px rgba(13,27,42,0.06);
  --shadow-xl:0 24px 56px rgba(13,27,42,0.18),0 8px 18px rgba(13,27,42,0.08);
  --shadow-inset:inset 0 1px 2px rgba(13,27,42,0.06);
  --shadow-focus:0 0 0 3px rgba(3,105,161,0.28); --shadow-focus-danger:0 0 0 3px rgba(159,18,57,0.26);
  --bw-hair:1px; --bw-thick:1.5px; --bw-accent:3px;
  --ease-out:cubic-bezier(0.22,1,0.36,1); --ease-in-out:cubic-bezier(0.65,0,0.35,1); --ease-standard:cubic-bezier(0.4,0,0.2,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms; --blur-panel:blur(12px);
}

/* ---------- Base elements & resets ---------- */
*, *::before, *::after { box-sizing:border-box; }
html.arena-ds, .arena-ds { -webkit-text-size-adjust:100%; }
body.arena-ds {
  margin:0; font-family:var(--font-sans); font-size:var(--text-base); font-weight:var(--fw-regular);
  line-height:var(--lh-normal); color:var(--ink); background:var(--canvas);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
.arena-ds h1,.arena-ds h2,.arena-ds h3,.arena-ds h4,.arena-ds h5,.arena-ds h6 {
  margin:0; font-family:var(--font-display); font-weight:var(--fw-semibold); color:var(--ink);
  line-height:var(--lh-tight); letter-spacing:var(--ls-tight);
}
.arena-ds p { margin:0; }
.arena-ds a { color:var(--accent); text-decoration:none; }
.arena-ds a:hover { text-decoration:none; }
.arena-ds button { font-family:inherit; }
.arena-ds code,.arena-ds kbd,.arena-ds samp,.arena-ds pre { font-family:var(--font-mono); font-size:0.92em; }
.arena-ds ::selection { background:var(--accent-soft); color:var(--accent-strong); }

.ao-eyebrow {
  font-family:var(--font-sans); font-size:var(--role-eyebrow-size); font-weight:var(--role-eyebrow-weight);
  letter-spacing:var(--role-eyebrow-spacing); text-transform:uppercase; color:var(--text-muted);
}
.ao-tnum { font-variant-numeric:tabular-nums; }
.ao-mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:var(--ls-tight); }

.arena-ds * { scrollbar-width:thin; scrollbar-color:var(--hairline-strong) transparent; }
.arena-ds *::-webkit-scrollbar { width:10px; height:10px; }
.arena-ds *::-webkit-scrollbar-thumb { background:var(--hairline-strong); border-radius:var(--radius-pill); border:3px solid transparent; background-clip:content-box; }
.arena-ds *::-webkit-scrollbar-track { background:transparent; }

/* ---------- Interaction states ---------- */
.ao-btn:not(:disabled):hover { filter:brightness(0.96); }
.ao-btn:not(:disabled):active { transform:translateY(0.5px); filter:brightness(0.92); }
.ao-btn:focus-visible { outline:none; box-shadow:var(--shadow-focus); }
.ao-icon-btn:not(:disabled):hover { background:var(--gray-100); color:var(--ink); }
.ao-icon-btn:not(:disabled):active { transform:translateY(0.5px); }
.ao-icon-btn:focus-visible { outline:none; box-shadow:var(--shadow-focus); }
.ao-card--interactive { cursor:pointer; transition:box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
.ao-card--interactive:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.ao-card--interactive:active { transform:translateY(0); box-shadow:var(--shadow-sm); }
.ao-field:focus-within { border-color:var(--accent); box-shadow:var(--shadow-focus); }
.ao-field:hover:not(:focus-within) { border-color:var(--hairline-strong); }
select.ao-field:focus,input.ao-field:focus { border-color:var(--accent); box-shadow:var(--shadow-focus); outline:none; }
.ao-tab:hover { color:var(--ink); }
.ao-tab:focus-visible { outline:none; box-shadow:var(--shadow-focus); border-radius:var(--radius-xs); }
.ao-row { transition:background var(--dur-fast) var(--ease-standard); }
.ao-row:hover { background:var(--gray-50); }

@media (prefers-reduced-motion: reduce) {
  .arena-ds *, .arena-ds *::before, .arena-ds *::after { animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ---------- Tabs ---------- */
.ao-tab {
  display:inline-flex; align-items:center; gap:7px; padding:0 2px 12px; margin-bottom:-1px;
  background:transparent; border:none; border-bottom:2px solid transparent; cursor:pointer;
  color:var(--muted-2); font-family:var(--font-sans); font-size:var(--text-base); font-weight:500;
  text-decoration:none; transition:color var(--dur-fast);
}
.ao-tab + .ao-tab { margin-left:22px; }
.ao-tab[aria-selected="true"] { color:var(--ink); font-weight:600; border-bottom-color:var(--accent); }
.ao-tab .ao-tab-count {
  font-family:var(--font-mono); font-size:var(--text-2xs); font-weight:700; color:var(--text-muted);
  background:var(--gray-100); border-radius:var(--radius-pill); padding:1px 7px;
}
.ao-tab[aria-selected="true"] .ao-tab-count { color:var(--accent-strong); background:var(--accent-soft); }

/* ---------- Slide-in drawer ---------- */
.ao-drawer { position:fixed; inset:0; z-index:60; visibility:hidden; }
.ao-drawer[data-open="true"] { visibility:visible; }
.ao-drawer-scrim { position:absolute; inset:0; background:rgba(13,27,42,0.42); opacity:0; transition:opacity var(--dur-base) var(--ease-standard); }
.ao-drawer[data-open="true"] .ao-drawer-scrim { opacity:1; }
.ao-drawer-panel {
  position:absolute; top:0; right:0; height:100%; width:min(560px,94vw); background:var(--canvas);
  box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden;
  transform:translateX(100%); transition:transform var(--dur-base) var(--ease-standard);
}
.ao-drawer[data-open="true"] .ao-drawer-panel { transform:translateX(0); }

/* <details> buttons (More options, settings disclosures): kill the native
   disclosure marker so the summary reads as a clean button, not a <select>. */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }