/* WISP Design Tokens v1.0 — import into web / design tools */
:root {
  /* Brand */
  --wisp-brand: "WISP";
  --wisp-domain: "wisp.la";
  --wisp-masterline: "A quiet trail for a noisy life.";

  /* Color — structure */
  --ink: #2C2825;
  --earth: #3D3429;
  --sandal: #9A7348;
  --ember: #C17A4A;
  --sage: #7D9B82;
  --mist: #A7C4BE;

  /* Color — fields */
  --bone: #F4F1EA;
  --cream: #FAF7F2;
  --sand: #E8DFD0;
  --fog: #D4CFC6;
  --sage-soft: #E4EDE6;
  --mist-soft: #E8F1EF;

  /* Semantic */
  --color-text: var(--ink);
  --color-text-muted: #6E675F;
  --color-bg: var(--cream);
  --color-surface: var(--bone);
  --color-border: #E5DFD4;
  --color-accent: var(--sandal);
  --color-cta: var(--sage);
  --color-on-dark: var(--cream);

  /* Type */
  --font-sans: "Helvetica Neue", Helvetica, Arial, "Noto Sans SC", sans-serif;
  --font-mono: ui-monospace, Menlo, monospace;
  --text-xs: 11px;
  --text-sm: 13px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 28px;
  --text-display: clamp(28px, 4vw, 40px);
  --tracking-brand: 0.12em;
  --tracking-domain: 0.28em;
  --leading-body: 1.55;

  /* Space */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-xxl: 64px;

  /* Ratio 70/20/10 */
  --ratio-field: 70%;
  --ratio-structure: 20%;
  --ratio-accent: 10%;
}

/* Utility helpers */
.wisp-bg-bone { background: var(--bone); }
.wisp-bg-cream { background: var(--cream); }
.wisp-bg-earth { background: var(--earth); color: var(--cream); }
.wisp-text-ink { color: var(--ink); }
.wisp-text-muted { color: var(--color-text-muted); }
.wisp-text-sandal { color: var(--sandal); }
.wisp-btn-primary {
  background: var(--ink); color: var(--cream);
  border: 0; padding: 12px 18px; font: 650 12px/1 var(--font-sans);
  letter-spacing: 0.04em; cursor: pointer;
}
.wisp-btn-sage {
  background: var(--sage); color: #fff;
  border: 0; padding: 12px 18px; font: 650 12px/1 var(--font-sans);
  letter-spacing: 0.04em; border-radius: 999px; cursor: pointer;
}