/* ============================================================================
   BitcoinPuzzles — design tokens
   Single source of truth for face, colour, type, space, depth and motion.
   Surface stylesheets consume these; no surface hardcodes a hex.
   Loaded first in the layout, before base.css and every surface sheet.
   ========================================================================= */

/* --- Faces ---------------------------------------------------------------
   Archivo (Omnibus-Type) carries UI and display. Chivo Mono carries every
   machine value: addresses, key ranges, balances, prizes, counts, dates.
   Both are variable (wght 100-900) — one file per subset, no static cuts.
   Archivo has no Hebrew, Japanese or Cyrillic coverage, so he/ja/ru fall
   through to platform faces by design; see --font-ui.
   ---------------------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/archivo-latin-7a918f31.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/archivo-latin-ext-4e7e2dd1.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Chivo Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/chivomono-latin-d92620d6.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Chivo Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/chivomono-latin-ext-e8b258d2.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- Type families -------------------------------------------------- */
  --font-ui: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Noto Sans Hebrew", "Hiragino Sans", "Yu Gothic UI", Meiryo, "Noto Sans",
    sans-serif;
  --font-mono: "Chivo Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, "Liberation Mono", monospace;

  /* --- Ink scale -----------------------------------------------------
     A near-neutral dark ramp with a faint cool cast. Deliberately not the
     blue-heavy slate ramp: at this density a blue ground fights the orange
     and turns every panel edge muddy.
     -------------------------------------------------------------------- */
  --ink-950: #0b0c0e; /* page ground */
  --ink-900: #101216; /* header, footer, sunken wells */
  --ink-870: #131519; /* page ground, raised sections */
  --ink-850: #15171c; /* panel */
  --ink-800: #1b1e24; /* panel raised, inputs */
  --ink-750: #23262e; /* hover fill */
  --ink-700: #2c3038; /* pressed fill */
  --ink-600: #3a3f49; /* strong divider */
  --ink-500: #565d69; /* disabled text  (2.9:1 — non-content only) */
  --ink-400: #7a828f; /* placeholder, tertiary  (5.0:1) */
  --ink-300: #9aa2ae; /* secondary text  (7.4:1) */
  --ink-200: #c3c9d2; /* strong secondary */
  --ink-100: #e3e7ec; /* body text */
  --ink-050: #f5f7f9; /* headings, max contrast */

  /* --- Accent: value, prize, primary action --------------------------
     The Bitcoin orange, kept as a standing brand commitment. It marks
     money and the primary action, and nothing else.
     -------------------------------------------------------------------- */
  --accent: #f7931a; /* 7.8:1 on --ink-950 */
  --accent-hi: #ffa733; /* hover */
  --accent-lo: #d97c08; /* pressed */
  --accent-dim: #7a4a0c; /* borders, rules */
  --accent-ink: #140c02; /* text on an accent fill — 8.1:1 */
  --accent-wash: rgba(247, 147, 26, 0.1);
  --accent-wash-hi: rgba(247, 147, 26, 0.16);

  /* --- Semantic state -------------------------------------------------
     Used only to signal state, never for decoration. Every state also
     carries a label, so colour is never the sole signal.
     -------------------------------------------------------------------- */
  --open: #3ec9c0; /* challenge open / live  (9.7:1) */
  --open-wash: rgba(62, 201, 192, 0.12);
  --solved: #5bc47a; /* claimed / solved  (8.9:1) */
  --solved-wash: rgba(91, 196, 122, 0.12);
  --locked: #9b8cf0; /* staked, held in escrow  (7.4:1) */
  --locked-wash: rgba(155, 140, 240, 0.12);
  --danger: #f2555a; /* error, destructive  (5.4:1) */
  --danger-wash: rgba(242, 85, 90, 0.12);

  /* --- Podium -----------------------------------------------------------
     Rank 1/2/3 on the leaderboard. Metal, not decoration: these three are
     the only place in the system where colour encodes an ordinal.
     -------------------------------------------------------------------- */
  --podium-gold: #ffab00;
  --podium-silver: #c0c0c0;
  --podium-bronze: #cd7f32;

  /* --- Third-party brand ------------------------------------------------
     Solana's own purple and green, used where the chain is named. Owned by
     Solana, not by this system, so they live apart from the palette above.
     -------------------------------------------------------------------- */
  --brand-solana-purple: #9945ff;
  --brand-solana-green: #14f195;

  /* --- Lines ----------------------------------------------------------
     Hairlines, not glows. Depth comes from fill and shadow.
     -------------------------------------------------------------------- */
  --line: rgba(255, 255, 255, 0.07);
  --line-hi: rgba(255, 255, 255, 0.12);
  --line-hard: rgba(255, 255, 255, 0.2);

  /* --- Scrollbar --------------------------------------------------------
     The bar is chrome, not content, so it is drawn as a hairline that
     happens to be draggable: a thumb from the same white-over-dark ramp as
     the rules above, and no track at all. The two steps up are for reach and
     press — the only moments the bar is worth looking at — and they are used
     only where the engine lets an author draw the states.
     -------------------------------------------------------------------- */
  --scroll-thumb: rgba(255, 255, 255, 0.16);
  --scroll-thumb-hi: rgba(255, 255, 255, 0.28);
  --scroll-thumb-hard: rgba(255, 255, 255, 0.38);

  /* --- Space: 4px base, 8px rhythm ------------------------------------ */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* --- Type scale: dense UI base, explicit steps ----------------------- */
  --fs-2xs: 0.6875rem; /* 11px — uppercase micro labels only */
  --fs-xs: 0.75rem; /* 12px */
  --fs-sm: 0.8125rem; /* 13px */
  --fs-base: 0.9375rem; /* 15px — UI body */
  --fs-md: 1rem; /* 16px — reading body */
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: clamp(2.25rem, 1.4rem + 3.4vw, 3.25rem);
  --fs-5xl: clamp(2.75rem, 1.3rem + 5.6vw, 4.5rem);

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.6;

  --tr-display: -0.03em;
  --tr-tight: -0.015em;
  --tr-label: 0.08em; /* uppercase micro labels */

  /* --- Radii ---------------------------------------------------------- */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-full: 999px;

  /* --- Depth: every shadow carries offset and blur --------------------- */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 2px 8px rgba(0, 0, 0, 0.45);
  --sh-3: 0 8px 24px -4px rgba(0, 0, 0, 0.55);
  --sh-4: 0 16px 48px -8px rgba(0, 0, 0, 0.65);

  /* --- Motion --------------------------------------------------------- */
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 280ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Measure -------------------------------------------------------- */
  --w-page: 1280px;
  --w-narrow: 960px;
  --w-prose: 68ch;
  --h-header: 60px;

  /* --- Focus ---------------------------------------------------------- */
  --ring: 0 0 0 2px var(--ink-950), 0 0 0 4px var(--accent);
  --z-header: 100;
  --z-nav: 110;
  --z-overlay: 90;
  --z-flash: 1000;
}