/* ============================================================
   WEB FOUNDRY — Core design tokens
   Mono display + clean sans body, molten-orange primary on
   near-black ink and bone paper.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------- COLOR: NEUTRALS (ink & paper) ---------- */
  --ink-0:  #0A0A0A;
  --ink-1:  #141414;
  --ink-2:  #1F1F1F;
  --ink-3:  #2A2A2A;
  --ink-4:  #3D3D3D;

  --paper-0: #FAFAF7;
  --paper-1: #F3F2ED;
  --paper-2: #E8E6DE;
  --paper-3: #D5D2C6;
  --paper-4: #A8A59A;

  /* ---------- COLOR: BRAND ---------- */
  --molten:     #FF5A1F;
  --molten-ink: #D9430E;
  --molten-wash:#FFE9DF;

  --iron:   #2E3A46;
  --brass:  #C8A24B;
  --acid:   #C6F24E;

  /* ---------- COLOR: SEMANTIC ---------- */
  --success: #2E8B57;
  --warning: #E8A13A;
  --danger:  #D23B3B;
  --info:    #2E5CC8;

  /* ---------- COLOR: FG/BG ROLES ---------- */
  --fg-1: var(--ink-0);
  --fg-2: #555047;
  --fg-3: #777260; /* AA: ~4.6:1 on --paper-0 for small text */
  --fg-inv: var(--paper-0);

  --bg-1: var(--paper-0);
  --bg-2: var(--paper-1);
  --bg-3: var(--paper-2);
  --bg-inv: var(--ink-0);

  --border-1: #D5D2C6;
  --border-2: #A8A59A;
  --border-ink: var(--ink-0);

  /* ---------- TYPOGRAPHY: FAMILIES ---------- */
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: var(--font-mono);

  /* ---------- TYPOGRAPHY: SCALE ---------- */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   26px;
  --text-2xl:  34px;
  --text-3xl:  46px;
  --text-4xl:  64px;
  --text-5xl:  88px;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  /* ---------- SPACING (4px grid) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ---------- RADII ---------- */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-1: 0 1px 0 rgba(10,10,10,0.04), 0 1px 2px rgba(10,10,10,0.06);
  --shadow-2: 0 2px 0 rgba(10,10,10,0.04), 0 4px 14px rgba(10,10,10,0.08);
  --shadow-3: 0 4px 0 rgba(10,10,10,0.04), 0 12px 32px rgba(10,10,10,0.12);
  --shadow-press: inset 0 1px 0 rgba(10,10,10,0.08);

  /* ---------- MOTION ---------- */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:   cubic-bezier(0.6, 0, 0.8, 0.3);
  --ease-std:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 560ms;
  --dur-5: 760ms;

  /* ---------- Z-INDEX SCALE ---------- */
  --z-sticky: 100;
  --z-menu:   200;
  --z-toast:  300;

  /* ---------- LAYOUT ---------- */
  --container-max: 1200px;
  --rule: 1px solid var(--border-1);
  --rule-strong: 1px solid var(--border-ink);
}