/* ─────────────────────────────────────────────────────────────────────────
   ClawX design system — "Cobalt on Ink".

   One file, loaded FIRST by every page. Before this existed each page carried
   its own copy of the palette, and they had drifted (three different greens,
   four greys called --muted, two radius systems). Pages now inherit everything
   here and only add layout.

   Contract:
   · Every colour a page uses is a token. Need a translucent version? Use the
     -rgb triplets:  rgba(var(--brand-rgb), .16)
   · Legacy names (--brand-2, --hair, --r-card, --perps …) are aliases kept so
     existing page CSS keeps working. New CSS should use the canonical names.
   · Brand is COBALT and only cobalt. Green and red are reserved for profit and
     loss — never decoration — so a coloured number always means money moved.
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist-Variable.woff2") format("woff2-variations"), url("/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-Variable.woff2") format("woff2-variations"), url("/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  color-scheme: dark;

  /* ── ink neutrals (one cool hue family, ~220°) ── */
  --ink-rgb: 7, 9, 13;
  --bg: #07090D;
  --surface: #0C1016;
  --surface-2: #11161E;
  --surface-3: #171D27;
  --surface-4: #1E2532;
  --border: #1B222D;
  --border-strong: #283140;
  --line-rgb: 166, 176, 192;           /* hairlines + translucent fills */
  --hair: rgba(var(--line-rgb), .09);

  --text: #ECF0F6;
  --text-2: #A6B0C0;
  --muted: #7C889C;                    /* ≥4.7:1 on every surface — AA for small text */

  /* ── brand: cobalt ── */
  --brand-rgb: 61, 91, 245;
  --brand: #3D5BF5;                    /* fills; white label = 5.2:1 */
  --brand-hover: #4D69FF;
  --brand-press: #3350E0;
  --brand-ink: #8FA3FF;                /* cobalt as TEXT on dark = 8:1 */
  --brand-dim: rgba(var(--brand-rgb), .14);
  --brand-glow: rgba(var(--brand-rgb), .34);
  --on-brand: #FFFFFF;

  /* ── money: reserved for P&L / direction / status ── */
  --green-rgb: 52, 209, 126;
  --green: #34D17E;
  --green-dim: rgba(var(--green-rgb), .13);
  --red-rgb: 247, 90, 111;
  --red: #F75A6F;
  --red-dim: rgba(var(--red-rgb), .13);
  --amber-rgb: 242, 181, 68;
  --amber: #F2B544;
  --amber-dim: rgba(var(--amber-rgb), .13);

  /* ── type ── */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 11px; --fs-sm: 12px; --fs-base: 14px; --fs-md: 16px; --fs-lg: 20px;
  --fs-xl: 28px; --fs-2xl: 40px; --fs-display: clamp(44px, 7.2vw, 96px);

  /* ── shape: tight inside, softer outside ── */
  --r-xs: 6px;   /* chips, badges */
  --r-sm: 9px;   /* buttons, inputs, segmented */
  --r-md: 12px;  /* inner tiles */
  --r-lg: 16px;  /* panels, cards */
  --r-xl: 22px;  /* modals, sheets */

  /* ── depth: shadows carry the ink hue, light comes from above ── */
  --shadow-1: 0 1px 0 rgba(255,255,255,.03) inset, 0 1px 2px rgba(var(--ink-rgb), .6);
  --shadow-2: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px -10px rgba(2, 4, 12, .7);
  --shadow-3: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -20px rgba(2, 4, 12, .85);

  /* ── motion ── */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-soft: cubic-bezier(.22, 1, .36, 1);
  --t-fast: 140ms; --t-med: 220ms; --t-slow: 420ms;

  /* ── layering: one scale, no 9999s ── */
  --z-sticky: 20; --z-nav: 40; --z-dropdown: 60; --z-overlay: 80; --z-modal: 100; --z-toast: 140;

  /* ── legacy aliases (pre-revamp page CSS still references these) ── */
  --border-2: var(--border-strong);
  --brand-2: var(--brand-ink);
  --green-glow: rgba(var(--green-rgb), .22);
  --perps: var(--brand);
  --perps-glow: var(--brand-glow);
  --mono: var(--font-mono);
  --radius: var(--r-lg);
  --r-ctl: var(--r-sm);
  --r-card: var(--r-lg);
  --r-modal: var(--r-xl);
  --r-squircle: 24px;
}

/* ── base ───────────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { background: var(--bg); color: var(--text); }
body {
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* numbers never jitter: every figure on a trading app is tabular */
.num, .mono, [data-num], .pv, .big, .price, .mono-num, code, kbd, pre:not(.nav-logo):not(.brand-ascii) {
  font-variant-numeric: tabular-nums slashed-zero;
}
code, kbd, .mono { font-family: var(--font-mono); }
h1, h2, h3 { text-wrap: balance; letter-spacing: -0.02em; }
p { text-wrap: pretty; }

::selection { background: rgba(var(--brand-rgb), .38); color: #fff; }

/* keyboard focus is always visible; mouse focus stays quiet */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; border-radius: 6px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; }

/* thin, ink-tinted scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: #3A4556; }
*::-webkit-scrollbar-track { background: transparent; }

/* skip link — first focusable element on every page */
.skip-link {
  position: fixed; left: 12px; top: 12px; z-index: 1000;
  transform: translateY(-160%); transition: transform var(--t-med) var(--ease);
  background: var(--brand); color: var(--on-brand); padding: 10px 14px; border-radius: var(--r-sm);
  font: 600 13px/1 var(--font-sans); text-decoration: none;
}
.skip-link:focus-visible { transform: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── shared components (new pages use these directly) ───────────────────── */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: var(--r-sm); border: 1px solid transparent;
  font: 600 14px/1 var(--font-sans); letter-spacing: -.005em; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease);
}
.ds-btn:active { transform: translateY(1px) scale(.985); }
.ds-btn:disabled, .ds-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.ds-btn--primary { background: var(--brand); color: var(--on-brand); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 20px -8px var(--brand-glow); }
.ds-btn--primary:hover { background: var(--brand-hover); }
.ds-btn--secondary { background: var(--surface-3); color: var(--text); border-color: var(--border-strong); }
.ds-btn--secondary:hover { background: var(--surface-4); border-color: #34404F; }
.ds-btn--ghost { background: transparent; color: var(--text-2); }
.ds-btn--ghost:hover { background: var(--surface-3); color: var(--text); }
.ds-btn--danger { background: var(--red-dim); color: var(--red); border-color: rgba(var(--red-rgb), .35); }
.ds-btn--danger:hover { background: rgba(var(--red-rgb), .2); }
.ds-btn--lg { height: 48px; padding: 0 22px; font-size: 15px; border-radius: 11px; }
.ds-btn--sm { height: 32px; padding: 0 12px; font-size: 13px; }

.ds-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-xs);
  font: 600 11px/1 var(--font-sans); letter-spacing: .01em; white-space: nowrap;
  background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border);
}
.ds-badge--brand { background: var(--brand-dim); color: var(--brand-ink); border-color: rgba(var(--brand-rgb), .3); }
.ds-badge--green { background: var(--green-dim); color: var(--green); border-color: rgba(var(--green-rgb), .3); }
.ds-badge--red   { background: var(--red-dim); color: var(--red); border-color: rgba(var(--red-rgb), .3); }
.ds-badge--amber { background: var(--amber-dim); color: var(--amber); border-color: rgba(var(--amber-rgb), .3); }
.ds-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(var(--green-rgb), .15); }

.ds-card {
  background: linear-gradient(180deg, rgba(var(--line-rgb), .035), rgba(var(--line-rgb), 0) 120px), var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-2);
}

.pos { color: var(--green); }
.neg { color: var(--red); }

/* ClawX mark — cobalt claw monogram. Inline SVG, so it inherits currentColor. */
.ds-mark { width: 26px; height: 26px; flex: none; color: var(--brand); }
.ds-wordmark { font: 700 17px/1 var(--font-sans); letter-spacing: -.035em; color: var(--text); }
.ds-wordmark b { color: var(--brand-ink); font-weight: 700; }