/* Stacks Labs Design System — colors & type tokens.
 *
 * Source: Claude Design export "Stacks Labs Design System"
 *         (stacks-labs-design-system-019df1fa-8a60-736e-a745-ae215681f946),
 *         tokens/tokens.css — synced 2026-07-28.
 * To re-sync, diff only the token body, which is unmodified:
 *         diff <(sed -n '/^:root {/,$p' upstream/tokens.css) \
 *              <(sed -n '/^:root {/,$p' assets/tokens.css)
 *
 * Trimmed copy of the design system's tokens/tokens.css. Everything from :root
 * onward is byte-identical to the original; only the @font-face block above it
 * differs, cut down to the four faces this site actually renders:
 *
 *   Matter 400-500      headings, brand, buttons
 *   Matter Mono 400     block heights, timestamps, countdown
 *   Matter Mono 500     uppercase mono eyebrows
 *   Instrument Sans     body copy and labels (400-700 covers the 400/500 we use)
 *
 * MatterSQMono-Medium is .woff rather than .woff2 because that is the only format
 * shipped upstream; it is the primary source for weight 500, not a fallback.
 *
 * Dropped: the legacy .woff fallbacks for Matter and Matter Mono, Instrument
 * Sans italic (no italics on the page), and Open Sauce Sans (only ever a
 * fallback behind Matter in --font-display, so it never renders). Re-add the
 * matching @font-face here if you start using one of them.
 */

/* Display — Matter. Headings. */
@font-face {
  font-family: 'Matter';
  src: url('fonts/matter-regular.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

/* Mono — Matter Mono. Numbers, hashes, timestamps. */
@font-face {
  font-family: 'Matter Mono';
  src: url('fonts/matter-mono-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Matter Mono';
  src: url('fonts/MatterSQMono-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Body — Instrument Sans. */
@font-face {
  font-family: 'Instrument Sans';
  src: url('fonts/InstrumentSans-Regular.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* === FONT FAMILIES === */
  --font-display: 'Matter', 'Open Sauce Sans', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Matter Mono', ui-monospace, 'JetBrains Mono', monospace;

  /* === NEUTRAL — Sand scale === */
  --sand-50:   #f7f6f5;
  --sand-100:  #f3f2f0;
  --sand-150:  #eae8e6;
  --sand-200:  #d5d3d1;
  --sand-300:  #bfbdba;
  --sand-400:  #95918c;
  --sand-500:  #777470;
  --sand-600:  #595754;
  --sand-700:  #3c3a38;
  --sand-800:  #2d2c2a;
  --sand-900:  #211f1f;
  --sand-950:  #181716;
  --sand-1000: #0f0f0e;
  --white:     #ffffff;
  --black:     #000000;

  /* === ACCENT — Stacks (orange) === */
  --stacks-100: #FFDFD1;
  --stacks-200: #FFC2A8;
  --stacks-300: #FFA57F;
  --stacks-400: #FF8761;
  --stacks-500: #FC6432; /* primary brand */
  --stacks-600: #CC4900;
  --stacks-700: #9C310D;

  /* === ACCENT — Bitcoin (gold) === */
  --bitcoin-100: #FFDFC1;
  --bitcoin-200: #FFD1A7;
  --bitcoin-300: #FFC288;
  --bitcoin-400: #FFAD65;
  --bitcoin-500: #FF9835;
  --bitcoin-600: #E17C18;
  --bitcoin-700: #FF8B00;

  /* === ACCENT — Testnet (violet) === */
  --testnet-100: #E7E5FF;
  --testnet-200: #DDD9FF;
  --testnet-300: #BBADFF;
  --testnet-400: #9985FF;
  --testnet-500: #765BFF;
  --testnet-600: #593FE0;

  /* === FEEDBACK === */
  --green-100: #E9F6EC;
  --green-150: #C2E7D0;
  --green-200: #ADDDC0;
  --green-300: #8ECEAA;
  --green-400: #5BB98B;
  --green-500: #30A46C;
  --green-600: #218358;
  --green-900: #174832;

  --blue-100: #E9F3FF;
  --blue-200: #DBECFF;
  --blue-300: #B5D5FF;
  --blue-400: #75ACF3;
  --blue-500: #2C8DFF;
  --blue-600: #0070DD;
  --blue-900: #0C447A;

  --red-100: #FFE9E9;
  --red-150: #FFD3D3;
  --red-200: #FFCACA;
  --red-300: #FF9DA0;
  --red-400: #F06E76;
  --red-500: #E32A35;
  --red-600: #B01425;
  --red-900: #5E1019;

  --yellow-100: #FEFCE9;
  --yellow-200: #FFF9B7;
  --yellow-300: #FFF394;
  --yellow-400: #F9E972;
  --yellow-500: #F3DC00;
  --yellow-600: #DBC600;
  --yellow-700: #A99100;
  --yellow-900: #6B5C05;

  --bronze-200: #FFDFC1;
  --bronze-600: #E17C18;
  --bronze-900: #713E0C;

  /* === SECONDARY (tx-type tags) === */
  --moss-200: #B8D47E;
  --moss-400: #97BD4A;
  --lime-200: #E6F07F;
  --lime-400: #D4E523;
  --pink-200: #DF8ED4;
  --pink-400: #D977CB;
  --peach-200: #FFA57F;
  --peach-400: #FF8761;
  --butter-200: #FAF884;
  --butter-400: #F8F65B;
  --blood-orange-200: #FC6432;
  --blood-orange-400: #CC4900;

  /* === SEMANTIC (light mode default) === */
  --surface-primary:   var(--sand-150);
  --surface-secondary: var(--sand-100);
  --surface-tertiary:  var(--sand-50);
  --surface-fourth:    var(--white);
  --surface-fifth:     var(--sand-200);
  --surface-invert:    var(--sand-800);

  --text-primary:   var(--sand-1000);
  --text-secondary: var(--sand-600);
  --text-tertiary:  var(--sand-400);
  --text-invert:    var(--sand-50);
  --text-error:     var(--red-500);
  --text-interactive-hover: var(--stacks-600);

  --border-primary:   var(--sand-300);
  --border-secondary: var(--sand-200);
  --border-tertiary:  var(--sand-100);

  --icon-primary:   var(--sand-1000);
  --icon-secondary: var(--sand-600);
  --icon-tertiary:  var(--sand-400);
  --icon-invert:    var(--sand-50);
  --icon-error:     var(--red-500);
  --icon-success:   var(--green-500);
  --icon-bitcoin:   var(--bitcoin-600);

  --brand: var(--stacks-500);

  /* === ELEVATION === */
  --elevation-sm: 0 2px 6px rgba(183,180,176,0.20);
  --elevation-md: 0 8px 16px rgba(183,180,176,0.20);
  --elevation-lg: 0 16px 32px rgba(183,180,176,0.20);

  /* === RADII === */
  --radius-xxs: 2px;
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-xxl: 18px;
  --radius-2xl: 20px;

  /* === SPACING (4-pt scale) === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* === TYPE — base type primitives === */
  --fs-xs: 12px;  --fs-sm: 14px;  --fs-md: 16px;  --fs-lg: 18px;
  --fs-xl: 20px;  --fs-2xl: 24px; --fs-3xl: 30px; --fs-3-5xl: 32px;
  --fs-4xl: 36px; --fs-4-5xl: 40px; --fs-5xl: 48px; --fs-6xl: 64px;
  --fs-6-5xl: 72px;

  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */

  --ls-tight:    -0.03em;
  --ls-semitight:-0.02em;
  --ls-slight:   -0.01em;
  --ls-normal:   0em;
}

[data-theme="dark"] {
  --surface-primary:   var(--sand-900);
  --surface-secondary: var(--sand-950);
  --surface-tertiary:  var(--sand-1000);
  --surface-fourth:    var(--sand-800);
  --surface-fifth:     var(--sand-700);
  --surface-invert:    var(--sand-100);

  --text-primary:   var(--sand-100);
  --text-secondary: var(--sand-400);
  --text-tertiary:  var(--sand-500);
  --text-invert:    var(--sand-1000);
  --text-error:     var(--red-400);
  --text-interactive-hover: var(--stacks-400);

  --border-primary:   var(--sand-600);
  --border-secondary: var(--sand-700);
  --border-tertiary:  var(--sand-950);

  --icon-primary:   var(--sand-100);
  --icon-secondary: var(--sand-400);
  --icon-tertiary:  var(--sand-500);
  --icon-invert:    var(--sand-1000);
  --icon-bitcoin:   var(--bitcoin-500);

  --elevation-sm: 0 2px 6px rgba(0,0,0,0.20);
  --elevation-md: 0 8px 16px rgba(0,0,0,0.20);
  --elevation-lg: 0 16px 32px rgba(0,0,0,0.20);
}

/* ============ SEMANTIC TYPE STYLES ============ */
.heading-3xl { font-family: var(--font-display); font-size: var(--fs-6-5xl); letter-spacing: var(--ls-tight); line-height: 1.0; font-weight: 400; }
.heading-2xl { font-family: var(--font-display); font-size: var(--fs-6xl);   letter-spacing: var(--ls-tight); line-height: 1.05; font-weight: 400; }
.heading-xl  { font-family: var(--font-display); font-size: var(--fs-5xl);   letter-spacing: var(--ls-semitight); line-height: 1.1; font-weight: 400; }
.heading-lg  { font-family: var(--font-display); font-size: var(--fs-4-5xl); letter-spacing: var(--ls-semitight); line-height: 1.1; font-weight: 400; }
.heading-md  { font-family: var(--font-display); font-size: var(--fs-3-5xl); letter-spacing: var(--ls-semitight); line-height: 1.125; font-weight: 400; }
.heading-sm  { font-family: var(--font-display); font-size: var(--fs-2xl);   letter-spacing: var(--ls-slight); line-height: 1.15; font-weight: 400; }
.heading-xs  { font-family: var(--font-display); font-size: var(--fs-xl);    letter-spacing: var(--ls-slight); line-height: 1.2; font-weight: 400; }

.text-regular-2xl { font-family: var(--font-body); font-size: var(--fs-2xl); line-height: 1.3; font-weight: 400; }
.text-regular-xl  { font-family: var(--font-body); font-size: var(--fs-xl);  line-height: 1.4; font-weight: 400; }
.text-regular-lg  { font-family: var(--font-body); font-size: var(--fs-lg);  line-height: 1.33; font-weight: 400; }
.text-regular-md  { font-family: var(--font-body); font-size: var(--fs-md);  line-height: 1.5; font-weight: 400; }
.text-regular-sm  { font-family: var(--font-body); font-size: var(--fs-sm);  line-height: 1.43; font-weight: 400; }
.text-regular-xs  { font-family: var(--font-body); font-size: var(--fs-xs);  line-height: 1.33; letter-spacing: var(--ls-slight); font-weight: 400; }

.text-medium-md   { font-family: var(--font-body); font-size: var(--fs-md);  line-height: 1.5; font-weight: 500; }
.text-medium-sm   { font-family: var(--font-body); font-size: var(--fs-sm);  line-height: 1.43; font-weight: 500; }
.text-medium-xs   { font-family: var(--font-body); font-size: var(--fs-xs);  line-height: 1.33; letter-spacing: var(--ls-slight); font-weight: 500; }

.text-semibold-md { font-family: var(--font-body); font-size: var(--fs-md);  line-height: 1.5; font-weight: 600; }
.text-semibold-sm { font-family: var(--font-body); font-size: var(--fs-sm);  line-height: 1.43; font-weight: 600; }

.text-mono-xl { font-family: var(--font-mono); font-size: var(--fs-xl); line-height: 1.4; font-weight: 400; }
.text-mono-lg { font-family: var(--font-mono); font-size: var(--fs-lg); line-height: 1.33; font-weight: 400; }
.text-mono-md { font-family: var(--font-mono); font-size: var(--fs-md); line-height: 1.5; font-weight: 400; }
.text-mono-sm { font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.43; font-weight: 400; }
.text-mono-xs { font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.33; font-weight: 400; }

body {
  font-family: var(--font-body);
  background: var(--surface-tertiary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}