/* css/variables.css — Single source of truth for design tokens.
   Include BEFORE any page CSS: <link rel="stylesheet" href="/css/variables.css"> */

:root {
  /* ── Brand palette ── */
  --sage:           #7a8c6e;
  --sage-light:     #a8b89a;
  --sage-dark:      #4f6047;
  --cream:          #f7f3ed;
  --warm-white:     #fdfaf6;
  --terracotta:     #c4724a;
  --terracotta-light:#e8a882;
  --gold:           #b8975a;
  --gold-light:     #d4b47a;
  --bark:           #5c4a32;

  /* ── Text ── */
  --text-dark:      #2a2218;
  --text-mid:       #5a5040;
  --text-light:     #8a7d6e;

  /* ── UI ── */
  --border:         #e2dbd0;
  --shadow:         rgba(90, 60, 20, 0.08);
  --shadow-strong:  rgba(90, 60, 20, 0.12);

  /* ── State ── */
  --success:        #2e7d32;
  --danger:         #c62828;
  --warning:        #b8975a;
  --info:           #1565c0;

  /* ── Focus ── */
  --focus-ring:     0 0 0 3px rgba(122, 140, 110, 0.35);
}

/* ── Universal reset ── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ── Accessibility: visible focus for keyboard users ── */
:focus-visible {
  outline: 2px solid var(--sage-dark);
  outline-offset: 2px;
  border-radius: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  box-shadow: var(--focus-ring);
}

/* ── Skip link for screen readers ── */
.skip-to-content {
  position: absolute;
  left: -999px;
  top: 0;
  padding: 10px 16px;
  background: var(--sage-dark);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  z-index: 99999;
}
.skip-to-content:focus {
  left: 8px;
  top: 8px;
}