/* habb — canonical color + motion tokens (60-30-10 discipline)
 * Single source of truth for the entire site. Loaded on every page
 * BEFORE typography.css and nav.css. Pages may still define their
 * own :root tokens in inline <style>, but the canonical values here
 * become the default that the rest of the site cascades from.
 *
 * Rule: 60% cream / 30% espresso / 10% terracotta (CTAs only).
 * No gradients. No alternating section backgrounds. No multi-color
 * text emphasis. Rule lines are cool espresso tints, not warm tans.
 */

:root {
  /* ─── Color — 60-30-10 trio ────────────────────────────────────── */
  --cream-primary:   #F4EEE4;          /* 60% — dominant background */
  --cream-secondary: #F4EEE4;          /* collapsed: was #ECE3D4 (alternating bg) */
  --cream-soft:      #F4EEE4;          /* alias to cream-primary, retired */

  --terracotta:      #C07A5C;          /* 10% — accent for CTAs only */
  --terracotta-deep: #A25F42;          /* CTA hover state only */
  --terracotta-light: #C07A5C;         /* collapsed: was #E5C3B1 (off-accent) */

  --espresso:        #3D2A1F;          /* 30% — text + selective dark sections */
  --espresso-soft:   #5A4E40;          /* muted body / secondary text */
  --espresso-muted:  #7A6E60;          /* tertiary text / fine print */

  /* Compatibility aliases for legacy --espresso variants used on some
     pages (some pages used #2A1B12 for the "deep" espresso). */
  --espresso-deep:   #2A1B12;          /* slightly darker — footer, dark moments */
  --espresso-text:   #3D2A1F;
  --terracotta-text: #6F3920;          /* darker terracotta — em accent */

  /* ─── Rule lines — cool espresso tint, never warm tan ──────────── */
  --rule:        rgba(61, 42, 31, 0.18);   /* default rule line */
  --rule-soft:   rgba(61, 42, 31, 0.10);   /* softer separator */
  --rule-strong: rgba(61, 42, 31, 0.32);   /* emphasized rule */

  /* ─── Motion — locked easing curves ────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-quick:   180ms;
  --dur-mid:     320ms;
  --dur-slow:    600ms;

  /* ─── Container widths — used across pages ─────────────────────── */
  --content-max:   1200px;
  --content-prose: 720px;
  --page-pad-x:    clamp(20px, 4vw, 64px);
}

/* Reduced motion — global respect */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-quick: 0ms;
    --dur-mid:   0ms;
    --dur-slow:  0ms;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   Canonical button system (locked 2026-04-29)
   Three tiers, used in this order of weight. Never use primary + secondary
   in the same viewport. Never use a bordered button alongside an underlined
   link in the same section — pick one register per surface.

   - .btn-primary   solid espresso fill, cream text. Single-call action only.
   - .btn-secondary 1px espresso stroke, transparent fill. Inverts on hover.
   - .btn-tertiary  plain text + rightward arrow, no border. Lightest weight.

   Color/border properties are !important to lock sitewide consistency
   over per-page inline overrides. Per-page padding / sizing / typography
   (font-size, letter-spacing, etc.) is intentionally NOT !important so
   sections keep their own scale.
   ────────────────────────────────────────────────────────────────────── */

.btn-primary {
  background: var(--espresso) !important;
  color: var(--cream-primary) !important;
  border: 1px solid var(--espresso) !important;
  border-radius: 2px !important;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-out);
}
.btn-primary:hover {
  background: var(--espresso-deep) !important;
  border-color: var(--espresso-deep) !important;
}
.btn-primary:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

.btn-secondary {
  background: transparent !important;
  color: var(--espresso) !important;
  border: 1px solid var(--espresso) !important;
  border-radius: 2px !important;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur-mid) var(--ease-out),
              color var(--dur-mid) var(--ease-out);
}
.btn-secondary:hover {
  background: var(--espresso) !important;
  color: var(--cream-primary) !important;
}
.btn-secondary:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

.btn-tertiary {
  background: transparent !important;
  color: var(--espresso) !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color var(--dur-mid) var(--ease-out);
}
.btn-tertiary:hover { color: var(--terracotta) !important; }
.btn-tertiary::after {
  content: '→';
  display: inline-block;
  transition: transform var(--dur-mid) var(--ease-out);
}
.btn-tertiary:hover::after { transform: translateX(4px); }