/* =========================================================================
   Furrow — Tokens (spacing, radius, shadow, motion, groove motif)
   Pair with furrow-colors-type.css.
   ========================================================================= */

:root {
  /* Spacing — 4px modular */
  --s-0:    0;
  --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;

  /* Radii */
  --r-0:   0;
  --r-1:   2px;   /* inputs, chips */
  --r-2:   4px;   /* buttons, cards */
  --r-3:   8px;   /* large modules, modals */
  --r-pill: 999px; /* status chips only */

  /* Borders */
  --bw-1:  1px;
  --bw-2:  2px;

  /* Shadow scale (very restrained, warmed) */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(29,41,50,0.06), 0 0 0 1px rgba(29,41,50,0.04);
  --shadow-2: 0 8px 24px rgba(29,41,50,0.08), 0 0 0 1px rgba(29,41,50,0.05);

  /* Motion */
  --ease:        cubic-bezier(0.2, 0.6, 0.2, 1);
  --d-press:     80ms;
  --d-hover:    120ms;
  --d-panel:    200ms;
  --d-reveal:   320ms;

  /* Layout */
  --header-h:    64px;
  --container:   1200px;
}

/* =====================================================
   GROOVE MOTIF
   The mark's cross-section, used as structure.
   One groove per surface, max. It marks the cut —
   where attention goes — not decoration.
   ===================================================== */

/* Section divider: a centered groove cut into a hairline */
.groove-divider {
  border: none;
  height: 18px;
  margin: var(--s-7) 0;
  background:
    center / auto 18px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 18' width='96' height='18'%3E%3Cpath d='M0 4 H30 V14 H66 V4 H96' stroke='%23C9BFA8' stroke-width='2' fill='none' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.groove-divider--ink {
  background:
    center / auto 18px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 18' width='96' height='18'%3E%3Cpath d='M0 4 H30 V14 H66 V4 H96' stroke='%2341525D' stroke-width='2' fill='none' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Groove underline for emphasized links / active nav */
.groove-link {
  color: var(--fg-1);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--rust-500);
}
.groove-link:hover { color: var(--rust-600); }

/* =====================================================
   CORE COMPONENTS
   ===================================================== */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--fw-semibold);
  padding: 10px 20px; border-radius: var(--r-2); border: var(--bw-1) solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background var(--d-hover) var(--ease), border-color var(--d-hover) var(--ease), color var(--d-hover) var(--ease);
}
.btn-primary { background: var(--accent-cta); color: var(--fg-on-ink-1); }
.btn-primary:hover { background: var(--accent-cta-hover); }
.btn-primary:active { background: var(--accent-cta-press); }
.btn-secondary { background: transparent; color: var(--fg-1); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--fg-1); }
.btn-ghost { background: transparent; color: var(--fg-2); }
.btn-ghost:hover { color: var(--fg-1); }

/* Status chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tr-caps); text-transform: uppercase; font-weight: var(--fw-medium);
  padding: 4px 10px; border-radius: var(--r-pill);
}
.chip-approved { background: var(--chip-approved-bg); color: var(--chip-approved-fg); }
.chip-process  { background: var(--chip-process-bg);  color: var(--chip-process-fg); }
.chip-caution  { background: var(--chip-caution-bg);  color: var(--chip-caution-fg); }
.chip-cta      { background: var(--chip-cta-bg);      color: var(--chip-cta-fg); }
.chip-neutral  { background: var(--chip-neutral-bg);  color: var(--chip-neutral-fg); }

/* Cards */
.card {
  background: var(--surface-0); border: var(--bw-1) solid var(--border-1);
  border-radius: var(--r-2); padding: var(--s-5);
}
.card:hover { border-color: var(--border-2); }
.card--ink { background: var(--surface-ink); border-color: var(--border-on-ink-1); }

/* Callout — the proof block. Rust rule on top: the cut, not a sidebar stripe */
.callout {
  background: var(--surface-2); border-top: 2px solid var(--accent-cta);
  padding: var(--s-4) var(--s-5);
}