/* ============================================================
   Tradevest Docs — design tokens (brand redesign)
   Hand-maintained. Dark is the default; [data-theme="light"]
   overrides for the light/dark toggle. The Redoc API theme is
   configured separately in theme.json (kept colour-aligned).
   ============================================================ */

:root {
  /* brand accent + gradients */
  --color-primary: #8b5cf6;
  --color-primary-2: #d633ff;
  --color-primary-3: #6366f1;
  --brand-grad: linear-gradient(120deg, var(--color-primary-3), var(--color-primary) 48%, var(--color-primary-2));
  --defi-grad: linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-2) 55%, #16a982 100%);

  /* fonts */
  --font-head: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-code: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;

  /* layout dimensions */
  --sidebar-width: 290px;
  --toc-width: 232px;
  --header-height: 0px; /* marketing header removed for now */
  --toolbar-height: 56px;
  --chrome-height: 56px; /* toolbar only; used for sticky offsets */
  --content-max: 1340px;
  /* Outer width of the docs shell (sidebar + content). Shared by guide, index
     and API pages so the sidebar/content never shift or resize when navigating
     between docs and API pages. Prose stays readably capped via .guide-content. */
  --shell-max: 1600px;

  /* HTTP method colours (kept in sync with theme.json) */
  --m-get: #16a982;
  --m-post: #8b5cf6;
  --m-put: #c88413;
  --m-patch: #9a63f6;
  --m-delete: #d44b5a;
}

/* ---------- DARK (default) ---------- */
:root,
[data-theme="dark"] {
  --color-bg: #08060f;
  --color-bg-elev: #0b0916;
  --color-bg-header: rgba(9, 7, 18, 0.82);
  --color-surface: #110d1f;
  --color-surface-2: #18142a;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.15);
  --color-text: #f3f1fb;
  --color-text-secondary: #a9a3c2;
  --color-text-muted: #756f90;
  --color-hover: rgba(255, 255, 255, 0.05);
  /* Sidebar navigation reads at small sizes against a very dark ground, so it
     runs brighter than the generic body-text scale: links are plain white and
     the supporting labels stay well above the muted grey. */
  --sidebar-text: #ffffff;
  --sidebar-text-secondary: rgba(255, 255, 255, 0.78);
  --sidebar-text-muted: rgba(255, 255, 255, 0.62);
  --color-accent-soft: color-mix(in srgb, var(--color-primary) 16%, transparent);
  --color-accent-text: color-mix(in srgb, var(--color-primary) 70%, white);
  --code-bg: #0c0a17;
  --code-border: rgba(255, 255, 255, 0.08);
  --code-text: #d6dae5;
  --inline-code-bg: rgba(139, 92, 246, 0.14);
  --inline-code-text: color-mix(in srgb, var(--color-primary) 55%, white);
  --shadow-card: 0 18px 40px rgba(0, 0, 0, 0.45);
  --shadow-elevated: 0 26px 60px rgba(0, 0, 0, 0.55);
  --glow: 0 0 0 1px var(--color-accent-soft), 0 14px 40px -8px color-mix(in srgb, var(--color-primary) 40%, transparent);
  --scrim: radial-gradient(900px 480px at 84% -8%, color-mix(in srgb, var(--color-primary) 15%, transparent), transparent 60%);
}

/* ---------- LIGHT ---------- */
[data-theme="light"] {
  --color-bg: #ffffff;
  --color-bg-elev: #fbfaff;
  --color-bg-header: rgba(255, 255, 255, 0.88);
  --color-surface: #ffffff;
  --color-surface-2: #f7f5ff;
  --color-border: #e7e4f4;
  --color-border-strong: #d6d1ee;
  --color-text: #16122b;
  --color-text-secondary: #5f5a78;
  --color-text-muted: #8a85a3;
  --color-hover: #f4f1ff;
  --sidebar-text: #16122b;
  --sidebar-text-secondary: #423d5c;
  --sidebar-text-muted: #6b6689;
  --color-accent-soft: color-mix(in srgb, var(--color-primary) 12%, white);
  --color-accent-text: var(--color-primary);
  --code-bg: #f4f2fb;
  --code-border: rgba(20, 17, 31, 0.10);
  --code-text: #1d1a2b;
  --inline-code-bg: color-mix(in srgb, var(--color-primary) 12%, white);
  --inline-code-text: color-mix(in srgb, var(--color-primary) 75%, black);
  --shadow-card: 0 12px 30px rgba(23, 20, 45, 0.08);
  --shadow-elevated: 0 22px 48px rgba(23, 20, 45, 0.14);
  --glow: 0 0 0 1px var(--color-accent-soft), 0 16px 36px -10px color-mix(in srgb, var(--color-primary) 28%, transparent);
  --scrim: radial-gradient(900px 460px at 86% -10%, color-mix(in srgb, var(--color-primary) 9%, transparent), transparent 62%);
}