/* =========================================================================
   Market Foundry — Design Tokens
   Resolved from the 1o8 design system + the Market Foundry re-skin.
   NOTE: MF overrides the 1o8 accent (yellow -> ORANGE) and darks
   (near-black -> TEAL). Mid-greys fall through to the neutral DS ramp.
   This file is the single source of truth. Do not import 1o8's raw
   colors_and_type.css alongside it — the accents will fight.
   ========================================================================= */

:root {
  /* ---- Brand accent (ORANGE) ---- */
  --mf-orange:        #FF751F;
  --mf-orange-hover:  #E9631A;
  --mf-orange-press:  #C9540F;
  --mf-orange-soft:   #FFE7D6;
  --mf-orange-ink:    #2A1400;

  /* Legacy DS accent aliases remapped to orange (comp relies on these) */
  --color-yellow:        var(--mf-orange);
  --color-yellow-hover:  var(--mf-orange-hover);
  --color-yellow-press:  var(--mf-orange-press);
  --color-yellow-soft:   var(--mf-orange-soft);
  --bg-accent:           var(--mf-orange);
  --fg-accent:           var(--mf-orange);
  --border-accent:       var(--mf-orange);

  /* ---- Ink ramp: darks are TEAL (MF override), mids are neutral (DS) ---- */
  --color-ink-1000: #2A5059;   /* MF teal — default fg + dark bg */
  --color-ink-900:  #254750;   /* MF */
  --color-ink-800:  #2F5760;   /* MF */
  --color-ink-700:  #4A4A4A;   /* DS */
  --color-ink-600:  #6E6E6E;   /* DS */
  --color-ink-500:  #909090;   /* DS */
  --color-ink-400:  #B5B5B5;   /* DS */
  --color-ink-300:  #D4D4D4;   /* DS */
  --color-ink-200:  #E8E8E8;   /* DS */
  --color-ink-100:  #E7E6F0;   /* MF */
  --color-ink-50:   #F0EFF6;   /* MF */
  --color-white:    #FFFFFF;

  /* ---- Semantic surfaces / fg ---- */
  --bg-canvas:   var(--color-white);
  --bg-subtle:   var(--color-ink-50);
  --bg-muted:    var(--color-ink-100);
  --bg-inverse:  var(--color-ink-1000);

  --fg-default:      var(--color-ink-1000);
  --fg-muted:        var(--color-ink-700);
  --fg-subtle:       var(--color-ink-500);
  --fg-on-dark:      var(--color-white);
  --fg-on-dark-muted:var(--color-ink-400);

  --border-default: var(--color-ink-200);
  --border-strong:  var(--color-ink-1000);
  --border-subtle:  var(--color-ink-100);

  /* ---- Type families ---- */
  --font-display: 'Archivo Black', 'Archivo', 'Arial Black', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* ---- Type scale ---- */
  --text-3xs:10px; --text-2xs:11px; --text-xs:12px; --text-sm:14px;
  --text-base:16px; --text-md:18px; --text-lg:20px; --text-xl:24px;
  --text-2xl:32px; --text-3xl:44px; --text-4xl:60px; --text-5xl:84px; --text-6xl:120px;

  /* ---- Spacing (4pt) ---- */
  --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; --space-32:128px;

  /* ---- Radii ---- */
  --radius-xs:2px; --radius-sm:4px; --radius-md:8px; --radius-lg:12px;
  --radius-xl:16px; --radius-pill:999px; --radius-full:50%;

  /* ---- Shadows (MF hard offset is 6px) ---- */
  --shadow-sm: 0 1px 2px rgba(10,10,10,.06), 0 1px 1px rgba(10,10,10,.04);
  --shadow-md: 0 4px 12px rgba(10,10,10,.08), 0 1px 2px rgba(10,10,10,.04);
  --shadow-lg: 0 12px 32px rgba(10,10,10,.10), 0 2px 4px rgba(10,10,10,.06);
  --shadow-hard:        6px 6px 0 var(--color-ink-1000);
  --shadow-hard-yellow: 6px 6px 0 var(--mf-orange);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-snap: cubic-bezier(.34,1.56,.64,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;

  /* ---- Layout ---- */
  --container-max: 1200px;   /* MF hero/section max is 1200 */
  --container-gutter: 24px;
  --header-h: 64px;          /* MF header height */
}

/* =========================================================================
   SEMANTIC TYPE CLASSES (subset used by MF)
   ========================================================================= */
.t-h2 { font-family:var(--font-display); font-weight:900; font-size:var(--text-4xl);
  line-height:.95; letter-spacing:-.02em; text-transform:uppercase; color:var(--fg-default); }
.t-h3 { font-family:var(--font-body); font-weight:700; font-size:var(--text-3xl);
  line-height:1.05; letter-spacing:-.015em; color:var(--fg-default); }
.t-eyebrow { font-family:var(--font-body); font-weight:700; font-size:var(--text-xs);
  line-height:1; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-muted); }
.t-body-lg { font-family:var(--font-body); font-weight:400; font-size:var(--text-md);
  line-height:1.55; color:var(--fg-default); text-wrap:pretty; }
.t-body { font-family:var(--font-body); font-weight:400; font-size:var(--text-base);
  line-height:1.55; color:var(--fg-default); text-wrap:pretty; }
.t-caption { font-family:var(--font-body); font-weight:500; font-size:var(--text-xs);
  line-height:1.4; color:var(--fg-muted); letter-spacing:.01em; }
.t-metric { font-family:var(--font-display); font-weight:900; font-size:var(--text-4xl);
  line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--fg-default); }