/* W4H · Work 4 Hire — Design Tokens
   Soft-modern warm palette. Accent hue: terracotta/amber (user-tunable).
   Colors defined in oklch for harmonious scales.
*/

:root {
  /* Type */
  --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Instrument Serif', ui-serif, Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Light theme — warm ivory */
  --bg:         oklch(0.985 0.008 70);   /* ivory */
  --bg-raised: oklch(1 0 0);
  --bg-sunk:   oklch(0.965 0.012 70);
  --surface:   oklch(0.975 0.01 70);
  --line:      oklch(0.9 0.012 65);
  --line-soft: oklch(0.94 0.01 65);

  --ink:       oklch(0.22 0.015 60);     /* warm near-black */
  --ink-2:     oklch(0.38 0.015 60);
  --ink-3:     oklch(0.55 0.012 65);
  --ink-4:     oklch(0.7 0.01 65);

  /* Accents (all share chroma 0.15, lightness 0.62) */
  --accent:    oklch(0.62 0.15 45);      /* terracotta */
  --accent-2:  oklch(0.72 0.12 85);      /* amber */
  --accent-soft: oklch(0.94 0.04 45);

  /* Semantic */
  --ok:        oklch(0.62 0.13 150);     /* verdant green */
  --ok-soft:   oklch(0.95 0.04 150);
  --warn:      oklch(0.72 0.14 75);
  --err:       oklch(0.58 0.18 25);

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 40px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(60,40,20,0.05), 0 1px 0 rgba(60,40,20,0.02);
  --shadow-md: 0 4px 16px -4px rgba(60,40,20,0.08), 0 2px 4px rgba(60,40,20,0.04);
  --shadow-lg: 0 24px 48px -16px rgba(60,40,20,0.16), 0 8px 16px -8px rgba(60,40,20,0.08);
}

html[data-theme="dark"] {
  --bg:        oklch(0.17 0.01 50);
  --bg-raised: oklch(0.21 0.012 50);
  --bg-sunk:   oklch(0.14 0.01 50);
  --surface:   oklch(0.20 0.012 50);
  --line:      oklch(0.30 0.015 50);
  --line-soft: oklch(0.25 0.012 50);

  --ink:       oklch(0.96 0.01 70);
  --ink-2:     oklch(0.82 0.012 70);
  --ink-3:     oklch(0.65 0.012 65);
  --ink-4:     oklch(0.5 0.01 60);

  --accent:     oklch(0.72 0.14 50);
  --accent-2:   oklch(0.78 0.12 85);
  --accent-soft: oklch(0.30 0.06 45);

  --ok-soft:   oklch(0.28 0.06 150);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

/* Monospace accent for privacy chrome — fingerprints, keys, tx hashes */
.mono { font-family: var(--font-mono); font-variant-ligatures: none; letter-spacing: -0.01em; }

/* Subtle paper grain for warmth */
.grain::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4  0 0 0 0 0.3  0 0 0 0 0.2  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); background-clip: content-box; border: 2px solid transparent; }