/* ============================================================
   KUDIESCROW DESIGN TOKENS
   Visual identity: "The Manifest" — the platform is a trade
   ledger. Every transaction is treated like a shipping manifest:
   stamped, numbered, tracked. Flat, no gradients, no shadows,
   no 3D. Ink on bonded paper.
   ============================================================ */

:root{
  /* ---- Color: bonded paper + stamp ink ---- */
  --ink:          #14231C;   /* near-black ledger ink, primary dark */
  --ink-soft:     #1E3327;   /* panels on dark */
  --paper:        #EDE7D8;   /* bonded manifest paper, primary light bg */
  --paper-alt:    #E1D8C1;   /* slightly deeper paper, for cards on paper bg */
  --paper-white:  #FAF8F1;   /* lightest surface */
  --seal:         #2C5940;   /* primary accent — stamp-ink green */
  --seal-dark:    #1F4230;   /* seal hover/active */
  --rust:         #9B3F2E;   /* secondary accent — alerts, disputes, stop */
  --rust-dark:    #7C3123;
  --brass:        #AD8A45;   /* tertiary accent — used sparingly: premium/verified */
  --line:         #1A1F1B;   /* hairline / border ink */
  --line-soft:    rgba(26,31,27,0.16);
  --line-on-dark: rgba(250,248,241,0.18);
  --muted:        #6B6555;   /* secondary text on paper */
  --muted-on-dark:#A9AF9E;   /* secondary text on ink */
  --white:        #FAF8F1;

  /* status */
  --status-pending:  #AD8A45;
  --status-secured:  #2C5940;
  --status-transit:  #3B5A78;
  --status-delivered:#2C5940;
  --status-dispute:  #9B3F2E;
  --status-released: #2C5940;

  /* ---- Type ---- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", "SF Mono", Menlo, monospace;

  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.9rem);
  --step-0:  clamp(1rem, 0.95rem + 0.2vw, 1.05rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.4vw, 1.35rem);
  --step-2:  clamp(1.5rem, 1.3rem + 0.8vw, 1.85rem);
  --step-3:  clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  --step-4:  clamp(2.6rem, 2rem + 2.8vw, 4rem);
  --step-5:  clamp(3.4rem, 2.4rem + 4.5vw, 5.6rem);

  /* ---- Spacing (8px base) ---- */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4.5rem;
  --sp-8: 6.5rem;

  --radius: 3px; /* flat: almost square, just enough to soften ink edges */
  --maxw: 1240px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--step-0);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; font-weight:600; letter-spacing:-0.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
input,select,textarea{ font-family: inherit; font-size: 1rem; }

.wrap{ max-width: var(--maxw); margin:0 auto; padding: 0 var(--sp-5); }
@media (max-width: 640px){ .wrap{ padding: 0 var(--sp-4); } }

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

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

.mono{ font-family: var(--font-mono); letter-spacing: 0.01em; }
.eyebrow{
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--seal);
}
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }