/* OperHand design tokens — transcribed from the PRODUCT, which wins over BRAND.md.
   Source of truth: C:\Users\Michael\Test\src\app\globals.css (Earth & Clinical, Stage 7).
   Do not invent values here; change the product first, then re-transcribe. */

:root {
  /* Surfaces — never pure white as a page ground */
  --surface: #fef9ee;
  --surface-dim: #dedacf;
  --surface-container-lowest: #ffffff; /* cards ON oat only */
  --surface-container-low: #f8f3e8;
  --surface-container: #f2ede2;        /* oat */
  --surface-container-high: #ede8dd;
  --surface-container-highest: #e7e2d7;

  /* Ink — all text */
  --ink: #1d1c15;                      /* product on-surface */
  --ink-muted: #53433d;                /* product on-surface-variant */
  --inverse-surface: #323029;
  --inverse-on-surface: #f5f0e5;

  /* Roles */
  --primary: #8a4b30;                  /* deep terracotta — the product primary */
  --primary-container: #a86346;
  --secondary: #55624d;                /* deep olive — passes AA on oat (6.1:1) */
  --outline: #86736c;
  --outline-variant: #d8c2ba;

  /* Brand five — fills and accents ONLY, never text */
  --oat-milk: #f2ede2;
  --blush-petal: #e7b9b2;
  --terracotta-clay: #c47a5c;
  --sage-whisper: #a7b59c;
  --misty-sky: #b7c6d6;
  --olive-grove: #6e775c;
  --olive-deep: #5d654e;               /* BRAND.md-approved darker olive for light-on-olive bands */

  /* NOTE: alarm red #ba1a1a is reserved for critical alerts in the product.
     It appears NOWHERE on the marketing site. Deliberately not defined here. */

  /* Type */
  --font-display: "Fraunces", "Manrope", Georgia, serif;
  --font-body: "Instrument Sans", "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --tracking-headline: -0.02em;
  --tracking-caps: 0.08em;

  /* Layout — 8px grid */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;
  --space-16: 128px;
  --container-max: 1280px;
  --margin-desktop: 64px;
  --margin-mobile: 20px;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Elevation — olive-tinted, never grey */
  --elevation-1: 0 2px 8px rgba(110, 119, 92, 0.15);
  --elevation-2: 0 8px 24px rgba(110, 119, 92, 0.24);
  --elevation-3: 0 16px 48px rgba(110, 119, 92, 0.28);
}