/* ───────────────────────────────────────────────────────────
   FENCED.CA — design tokens
   Base palette, type ramp, motion curves, spacing scale.
   Mirrored as a reference view in app.jsx.
   ─────────────────────────────────────────────────────────── */

:root {
  /* Color — base */
  --ink: #1F2227;          /* dark industrial gray (was charcoal black) */
  --paper: #F5F4EF;        /* off-white */
  --steel: #5A6473;        /* cool steel grey */
  --brass: #F08C4F;        /* warm orange — CTAs, highlights. Bumped from #E07A3B for WCAG 1.4.3 AA contrast on --ink (5.16:1 vs 3.91:1). */
  --spark: #7AB8FF;        /* electric blue — fusion moment only */

  /* Color — derived */
  --ink-2: #272B31;        /* ink raised 1 step */
  --ink-3: #32363D;        /* ink raised 2 steps */
  --ink-line: rgba(245,244,239,0.08);
  --ink-line-strong: rgba(245,244,239,0.18);
  --paper-dim: rgba(245,244,239,0.74);  /* bumped from 0.62 — WCAG AA contrast on --ink */
  --paper-mute: rgba(245,244,239,0.58);  /* bumped from 0.42 — WCAG AA contrast on --ink */

  /* Scene tints (8% overlay over ink) */
  --tint-pool: #3F8FB2;
  --tint-farm: #C89D52;
  --tint-security: #3D444E;
  --tint-prairie: #8A7B4F;

  /* Type */
  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-editorial: "Instrument Serif", "Times New Roman", serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale */
  --t-stat: 11px;       /* mono metadata */
  --t-eyebrow: 12px;    /* eyebrows, labels */
  --t-body: 16px;       /* body */
  --t-lead: 18px;       /* lead paragraph */
  --t-h3: 24px;
  --t-h2: clamp(40px, 5vw, 72px);
  --t-h1: clamp(56px, 8vw, 128px);

  /* Motion */
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring-soft: cubic-bezier(0.34, 1.26, 0.64, 1);

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  /* 5% noise overlay — referenced in brief */
  background-image:
    radial-gradient(circle at 50% 0%, rgba(196,154,95,0.04), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96  0 0 0 0 0.96  0 0 0 0 0.93  0 0 0 0.06 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  background-attachment: fixed;
}

::selection { background: var(--brass); color: var(--ink); }

a { color: inherit; text-decoration: none; }

button { font: inherit; cursor: default; }

h1, h2, h3, h4, h5, h6, p { margin: 0; }

/* ─── shared primitives ───────────────────────────────────── */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-stat);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-mute);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 0.18s var(--ease-out-expo),
              background 0.18s var(--ease-out-expo),
              color 0.18s var(--ease-out-expo);
  cursor: default;
}
.btn-primary { background: var(--brass); color: var(--ink); }
.btn-primary:hover { background: #D6AC72; }
.btn-ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--ink-line-strong);
}
.btn-ghost:hover { border-color: var(--paper); }
.btn .arr {
  display: inline-block;
  transition: transform 0.25s var(--ease-out-expo);
}
.btn:hover .arr { transform: translateX(4px); }

/* link arrow used everywhere */
.tlink {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--brass);
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease-out-expo);
}
.tlink:hover { border-color: var(--brass); }

/* Container helpers */
.wrap { width: min(1280px, 92vw); margin: 0 auto; }
.wrap-narrow { width: min(960px, 92vw); margin: 0 auto; }

/* Reduced motion fallback */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}