/* ==========================================================================
   BitcoinNow — token layer
   Generated world: "The Instrument". Rules carry structure; colour lives in
   the digits. Every value here is a decision, not a default.
   Palette verified: anti-antropik audit_file.py -> COMPLIANT, 0 violations
   (fingerprint 5697117fa1b27195). Contrast ratios noted per token.
   ========================================================================== */

@font-face {
  font-family: "Azeret Mono";
  src: url("fonts/azeret-mono.woff2") format("woff2");
  font-weight: 400 700;          /* variable: covers both weights in one file */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- ground: four steps only. Rules do the structural work, not surfaces. */
  --ground:        #06080B;
  --ground-alt:    #0B0E13;   /* alternating table rows */
  --ground-raise:  #11161D;   /* inputs, pressed states */
  --rule:          #1B222C;   /* decorative separation */
  --rule-strong:   #55616F;   /* meaningful boundary — 3.18:1, clears AA non-text */

  /* --- ink */
  --ink:           #E6EAF0;   /* 16.61:1 */
  --ink-2:         #9BA6B4;   /*  8.12:1 */
  --ink-3:         #6E7A89;   /*  4.59:1 — floor for body-size text */

  /* --- the single accent. Live indicator, primary series, active state. Nowhere else. */
  --accent:        #F7931A;   /*  8.73:1 on dark ground; fills and borders in both themes */
  --accent-ink:    #F7931A;   /*  accent AS TEXT; overridden in light */
  --accent-line:   #F7931A;   /*  the chart series; a 2px mark needs 3:1 */
  --accent-dim:    #B36A0F;

  /* --- market direction is a palette law, never chrome.
         Never the sole channel: every value also carries a +/- sign. */
  --up:            #2FD98A;   /* 10.90:1 */
  --down:          #F54159;   /*  5.52:1 */
  --stale:         #E0A93B;   /*  9.46:1 — the third data state */

  /* --- type: two families. Mono is the instrument; system sans is the reading. */
  --f-mono: "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-prose: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- type scale: 7 steps, 11px floor, 5.8x range.
         Tracking is size-specific (tighten as it grows, open as it shrinks).
         Leading is inverse to size, tightened throughout for density. */
  --t-micro:  0.6875rem;  --lh-micro: 1.45;  --tr-micro:  0.06em;
  --t-label:  0.75rem;    --lh-label: 1.35;  --tr-label:  0.09em;
  --t-body:   0.8125rem;  --lh-body:  1.55;  --tr-body:   0;
  --t-lede:   0.9375rem;  --lh-lede:  1.6;   --tr-lede:   0;
  --t-stat:   1.375rem;   --lh-stat:  1.2;   --tr-stat:  -0.01em;
  --t-big:    2.375rem;   --lh-big:   1.05;  --tr-big:   -0.02em;
  --t-hero:   4rem;       --lh-hero:  1;     --tr-hero:  -0.03em;

  --w-reg: 400;
  --w-bold: 600;

  /* --- spacing: 4px grid, no values off it */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* --- radii: the terminal law is 0. Controls get 2px; chips are pills. */
  --r-flat: 0;
  --r-ctl: 2px;
  --r-pill: 999px;

  /* --- motion. Exponential ease-out from an already-visible default.
         Never transition: all — every use names its properties. */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --d-tap: 100ms;    /* press feedback, fires on pointer-down */
  --d-flash: 400ms;  /* changed-digit decay */
  --d-move: 260ms;   /* panel/state change */
  --d-count: 600ms;  /* result count-up, once, on first render only */
}

[data-theme="light"] {
  --ground:        #FFFFFF;
  --ground-alt:    #F4F6F8;
  --ground-raise:  #EAEEF2;
  --rule:          #D8DEE6;
  --rule-strong:   #AAB4C0;
  --ink:           #10151B;   /* 18.34:1 */
  --ink-2:         #4A5563;   /*  7.58:1 */
  --ink-3:         #667081;
  --accent:        #F7931A;   /* fills only */
  --accent-ink:    #8A4F06;   /*  6.56:1 — the text-safe accent in light */
  --accent-line:   #CC6100;   /*  3.98:1 on white; brand orange itself is 2.30:1 */
  --accent-dim:    #8A4F06;
  --up:            #067647;   /*  5.69:1 */
  --down:          #C1272D;   /*  5.84:1 */
  --stale:         #8A6206;   /*  5.48:1 */
}

/* --------------------------------------------------------------------------
   Browser surfaces. The parts we did not draw still carry the design.
   -------------------------------------------------------------------------- */
a { color: var(--accent-ink); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
::selection { background: var(--accent); color: #06080B; }
:root { color-scheme: dark; accent-color: var(--accent); caret-color: var(--accent); }
[data-theme="light"] { color-scheme: light; }

* { scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--rule-strong); border: 3px solid var(--ground); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Digits never shift width. This is the load-bearing detail of the whole site. */
.num, table, input, .stat-value, .hero-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-flash: 1ms; --d-move: 1ms; --d-count: 1ms; --d-tap: 1ms; }
}

@media (prefers-contrast: more) {
  :root { --rule: #55616F; --ink-3: #9BA6B4; }
}

/* ==========================================================================
   Shell: header, nav and footer for redesigned pages.
   These pages do not load the legacy styles.css, so the shared chrome from
   common.py is styled here in the terminal system.
   ========================================================================== */
body { margin: 0; background: var(--ground); color: var(--ink);
       font-family: var(--f-mono); font-size: var(--t-body); line-height: var(--lh-body); }
*, *::before, *::after { box-sizing: border-box; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--accent);
             color: #06080B; padding: var(--s-2) var(--s-3); z-index: 10; }
.skip-link:focus { left: 0; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 var(--s-4); }

.site-header { border-bottom: 1px solid var(--rule-strong); }
.header-inner { display: flex; align-items: center; gap: var(--s-4);
                padding: var(--s-3) 0; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: var(--s-2);
         text-decoration: none; color: var(--ink); font-weight: var(--w-bold);
         letter-spacing: var(--tr-stat); }
.brand-mark { display: inline-flex; align-items: center; justify-content: center;
              width: 22px; height: 22px; background: var(--accent); color: #06080B;
              border-radius: var(--r-pill); font-weight: var(--w-bold); font-size: var(--t-body); }
.brand-tld { color: var(--ink-3); }
.nav { display: flex; gap: var(--s-4); margin-left: auto; flex-wrap: wrap; }
.nav a { color: var(--ink-2); text-decoration: none; font-size: var(--t-label);
         letter-spacing: var(--tr-label); text-transform: uppercase;
         padding: var(--s-1) 0; border-bottom: 1px solid transparent;
         transition: color var(--d-tap) var(--e-out), border-color var(--d-tap) var(--e-out); }
.nav a:hover { color: var(--ink); }
body[data-page="tools"] .nav a[data-nav="tools"],
body[data-page="markets"] .nav a[data-nav="markets"],
body[data-page="learn"] .nav a[data-nav="learn"],
body[data-page="blog"] .nav a[data-nav="blog"],
body[data-page="converter"] .nav a[data-nav="converter"],
body[data-page="dashboard"] .nav a[data-nav="dashboard"] {
  color: var(--accent-ink); border-bottom-color: var(--accent);
}
.nav-toggle { display: none; background: transparent; border: 1px solid var(--rule-strong);
              color: var(--ink); border-radius: var(--r-ctl); padding: var(--s-1) var(--s-2);
              cursor: pointer; }
.nav-toggle svg { width: 18px; height: 18px; display: block; }
@media (max-width: 760px) {
  .nav-toggle { display: block; margin-left: auto; }
  .nav { flex-basis: 100%; display: none; }
  .nav.is-open { display: flex; flex-direction: column; gap: var(--s-2); }
}

.site-footer { border-top: 1px solid var(--rule-strong); margin-top: var(--s-8);
               padding: var(--s-5) 0 var(--s-7); color: var(--ink-3); }
.footer-nav { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-3); }
.footer-nav a { color: var(--ink-2); text-decoration: none; font-size: var(--t-label);
                letter-spacing: var(--tr-label); text-transform: uppercase; }
.footer-nav a:hover { color: var(--ink); }
.footer-copy, .footer-disclaimer { font-size: var(--t-micro); letter-spacing: var(--tr-micro);
                                   line-height: var(--lh-micro); margin: var(--s-2) 0 0;
                                   max-width: 76ch; }
#error-banner:empty { display: none; }
#error-banner { border-top: 1px solid var(--down); border-bottom: 1px solid var(--down);
                color: var(--down); padding: var(--s-3) 0; margin: var(--s-4) 0; }

/* --------------------------------------------------------- theme toggle --- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  background: transparent; color: inherit;
  border: 1px solid var(--rule-strong); border-radius: var(--r-ctl);
  transition: transform 100ms cubic-bezier(0.16,1,0.3,1), border-color 100ms cubic-bezier(0.16,1,0.3,1);
}
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle svg { width: 17px; height: 17px; display: block; }
.theme-toggle .i-sun { display: none; }
[data-theme="light"] .theme-toggle .i-sun { display: block; }
[data-theme="light"] .theme-toggle .i-moon { display: none; }
@media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } }

.header-inner .theme-toggle { margin-left: auto; }
.header-inner .nav { margin-left: 0; }