/* ==========================================================================
   SatsRail brand tokens — SINGLE SOURCE OF TRUTH
   ==========================================================================

   The design tokens that must be identical across every SatsRail surface:
   brand colors, the type scale, the mono face, motion, and the shared radius
   steps. Nothing surface-specific lives here.

   Four consumers, one file:
     • Portal   — picked up by `require_tree .` in application.css.
     • Website  — copied to public/marketing/css/brand-tokens.css by
                  `rake website:build` and linked ahead of satsrail.css.
     • Book     — copied to public/book/assets/css/brand-tokens.css by
                  `rake book:build` and linked ahead of its site.css.
     • API docs — copied to public/developers/assets/css/brand-tokens.css by
                  `rake api_docs:build` and linked ahead of its docs.css.

   Tokens that legitimately differ live in their own stylesheets, not here —
   the portal renders on light content surfaces, the marketing site on a dark
   canvas, and the book on warm paper under a serif column, so hairlines,
   shadows and the spacing scale are deliberately different on each side. Do
   not move those in.

   One name to be careful with: --ink here is the deep black painted *behind*
   content. The book uses the same word for the color of text, which is why
   its reading pair is prefixed --book-ink / --book-paper; book:build fails
   the build if the two ever define the same token again.

   Changing a value here changes all four surfaces. That is the point — the
   developer docs shipped their own `--bitcoin-gold: #d4a017` for as long as
   they were a separate repo, half a shade off the gold below, and nothing
   caught it because nothing linked the two files.
   ========================================================================== */

:root {
  /* ── Brand: Refined Bitcoin Gold ─────────────────────────────────────── */
  --ink: #0a0a0a;                     /* deep black background */
  --surface: #151515;                 /* card surface */
  --text: #ededed;                    /* primary text on dark surfaces */
  --gray-900: #0a0a0a;                /* alias of --ink, kept for back-compat */
  --bitcoin-orange: #e8b53c;          /* refined gold (primary accent) */
  --bitcoin-orange-dark: #b8860b;     /* dark gold (borders, active) */
  --bitcoin-orange-darker: #8b6914;   /* darker gold (rare, deep states) */
  --btc-orange: #f7931a;              /* warmer Bitcoin-orange highlight */
  --lightning-purple: #f7931a;        /* legacy var — remapped to BTC orange */
  --lightning-purple-light: #f7931a;  /* legacy var — remapped to BTC orange */
  --gold-glow: rgba(232, 181, 60, 0.15);

  /* Gold focus/hover ring. Brand, not surface — same on light and dark. */
  --shadow-glow: 0 0 0 1px rgba(232, 181, 60, 0.25), 0 8px 32px rgba(232, 181, 60, 0.12);

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Courier New', monospace;

  --fs-2xs: 0.875rem;   /* 14px - badges, micro labels */
  --fs-xs: 1rem;        /* 16px - timestamps, small text */
  --fs-sm: 1.125rem;    /* 18px - nav links, secondary text */
  --fs-base: 1.25rem;   /* 20px - body text, table cells */
  --fs-md: 1.375rem;    /* 22px - emphasized text */
  --fs-lg: 1.5rem;      /* 24px - section headers */
  --fs-xl: 1.75rem;     /* 28px - card headers */
  --fs-2xl: 2rem;       /* 32px - page titles */
  --fs-3xl: 2.5rem;     /* 40px - display text */
  --fs-4xl: 3.5rem;     /* 56px - stat values */
  --fs-5xl: 4rem;       /* 64px - hero numbers */

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-base: 1.5;
  --lh-relaxed: 1.65;

  /* ── Navigation shell ────────────────────────────────────────────────
     The dark navbar is the one component the portal and the marketing site
     render from the same markup (`.navbar-bitcoin`), so its type scale and
     current-page colors are brand, not surface: they belong here rather
     than in either side's satsrail.css, where the two copies had already
     drifted into different highlight treatments. Change a value here and
     both navbars move together.

     The link size deliberately sits below --fs-2xs: the navbar is mono and
     uppercase, which reads a full step larger than the same number in the
     body face. */
  --nav-fs: 0.8125rem;                /* 13px - nav links, dropdown rows */
  --nav-fs-sm: 0.75rem;               /* 12px - CTAs, dropdown headers */
  --nav-fs-brand: 1rem;               /* 16px - brand wordmark */
  --nav-tracking: 0.06em;
  --nav-logo-height: 22px;

  /* Gold is reserved for the current page. Hover brightens toward white so
     the two states never read as the same thing. */
  --nav-color: rgba(255, 255, 255, 0.62);
  --nav-color-hover: rgba(255, 255, 255, 0.92);
  --nav-active-color: var(--bitcoin-orange);
  --nav-active-bg: rgba(232, 181, 60, 0.12);
  --nav-active-bg-hover: rgba(232, 181, 60, 0.2);

  /* ── Radius ──────────────────────────────────────────────────────────── */
  /* --radius-sm is NOT shared: the portal uses 0.375rem, the site 0.25rem. */
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-pill: 999px;

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 400ms;
}