/* Whole Life 2.0 — brand theme tokens
   Drop into your app's global stylesheet (or convert to your token system:
   Tailwind theme, CSS-in-JS, design tokens JSON, etc).

   Colors are authored in OKLCH (perceptually even, wide gamut). Hex fallbacks
   are given in comments for tools that don't speak OKLCH yet. */

:root {
  /* ---- Brand palette ---- */
  --wl-field:        oklch(0.47 0.094 152);   /* #3a6a4e  primary green   */
  --wl-field-deep:   oklch(0.38 0.078 154);   /* #2c5440  deep green       */
  --wl-field-soft:   oklch(0.62 0.10 150);    /* #5a9168  leaf / accent     */
  --wl-blush:        oklch(0.86 0.058 28);    /* #f0cfc8  pale red (tint)   */
  --wl-blush-deep:   oklch(0.745 0.115 30);   /* #d98b7c  sun / warm accent */
  --wl-ink:          oklch(0.28 0.018 160);   /* #2a342c  text / 1-color    */
  --wl-ink-soft:     oklch(0.52 0.02 155);    /* #6f7a72  secondary text    */
  --wl-paper:        oklch(0.987 0.006 95);   /* #fdfcf7  background        */
  --wl-paper-2:      oklch(0.955 0.009 92);   /* #f0eee9  raised surface     */
  --wl-hair:         oklch(0.90 0.012 110);   /* hairline / divider          */

  /* ---- Semantic roles (theme your UI off these, not the raw colors) ---- */
  --wl-bg:           var(--wl-paper);
  --wl-surface:      var(--wl-paper-2);
  --wl-text:         var(--wl-ink);
  --wl-text-muted:   var(--wl-ink-soft);
  --wl-primary:      var(--wl-field);
  --wl-primary-ink:  var(--wl-paper);        /* text on a primary fill */
  --wl-accent:       var(--wl-blush-deep);
  --wl-border:       var(--wl-hair);

  /* ---- Type ---- */
  --wl-font-sans:    'Space Grotesk', system-ui, -apple-system, sans-serif;
  --wl-font-serif:   'Spectral', Georgia, 'Times New Roman', serif;
  /* Wordmark = sans, 700, letter-spacing ~0.02em, uppercase.
     Tagline   = sans, 500, letter-spacing ~0.2em, uppercase, --wl-field.
     Body/UI   = sans 400–500. Editorial headings may use the serif. */

  /* ---- Radius & elevation (gentle, organic) ---- */
  --wl-radius-sm:    8px;
  --wl-radius-md:    14px;
  --wl-radius-lg:    24px;
  --wl-shadow-sm:    0 1px 3px rgba(42,52,44,.08), 0 4px 16px rgba(42,52,44,.06);
}

/* Optional dark / reversed surface (e.g. footer, hero on green) */
.wl-on-dark {
  --wl-bg:          var(--wl-field-deep);
  --wl-surface:     var(--wl-field);
  --wl-text:        var(--wl-paper);
  --wl-text-muted:  color-mix(in oklch, var(--wl-paper) 75%, transparent);
  --wl-primary:     var(--wl-paper);
  --wl-primary-ink: var(--wl-field-deep);
  --wl-accent:      var(--wl-blush);
  --wl-border:      color-mix(in oklch, var(--wl-paper) 18%, transparent);
}

/* ---- Logo sizing helpers ---- */
.wl-logo        { display: inline-block; line-height: 0; }
.wl-logo--mark  { width: 44px; }    /* nav / favicon-ish */
.wl-logo--lockup{ width: 220px; }   /* header / hero     */
/* Clear space: keep padding ≥ 25% of the mark's width on all sides.
   Minimum legible mark size: 24px. Below that, drop the rays/sprout detail. */