/*
 * Arbor — shared brand tokens
 *
 * Single source of truth for the palette and type stack defined in
 * Brandbook.md §3 and §4. The four SPAs previously each hard-coded the
 * archived CohortTrials teal (#1F6F6B / #155551 / #E2F0EF), which shares no
 * colour with the documented Arbor palette, and all four used a system font
 * stack rather than the specified Fraunces / Inter / JetBrains Mono.
 *
 * Contrast notes (measured, sRGB, WCAG 2.1):
 *   Grove   on Chalk  = 9.49:1
 *   Bark    on Mist   = 12.88:1
 *   Canopy  on Paper  = 5.19:1
 *   Paper   on Grove  = 9.95:1
 *   Stone   on Paper  = 4.51:1   (body-size only — see --stone-on-mist)
 *
 * Two documented values do not survive measurement and are corrected here:
 *   - Flint #C9773A on Paper is 3.40:1, not the 4.6:1 the Brandbook claims.
 *     Flint is kept for non-text use (rules, icons, fills); --flint-text is
 *     the darkened text-safe variant at 6.64:1.
 *   - Stone #6B7A72 on Mist is 4.05:1, below AA. --stone-on-mist is the
 *     darkened variant for muted text sitting on a Mist surface.
 */

:root {
  /* Primary */
  --grove:  #1A4B3A;
  --canopy: #2D7A5A;

  /* Secondary */
  --slate-fern: #3D5C4A;
  --mist:       #EEF4F1;

  /* Accent */
  --flint:       #C9773A;  /* non-text use only */
  --flint-text:  #8F4A1B;  /* 6.64:1 on Paper, 6.05:1 on --flint-surface */
  --flint-surface: #FDF3E7;
  --chalk:       #F8FAF9;

  /* Neutrals */
  --bark:  #2A2A2A;
  --stone: #6B7A72;
  --stone-on-mist: #55635B;
  --lichen: #B8CABF;
  --paper: #FFFFFF;

  /* Borders. Lichen on Paper is 1.72:1, far below the 3:1 required of a
     non-text UI boundary (1.4.11), so inputs get a darker edge. */
  --border:       var(--lichen);
  --border-input: #7E9488;

  /* Status */
  --ok:      #1A4B3A;
  --ok-bg:   #E4EFE9;
  --warn:    var(--flint-text);
  --warn-bg: var(--flint-surface);
  --danger:    #A32017;
  --danger-bg: #FBE8E5;

  /* Focus ring — Canopy at full opacity, not a low-alpha tint. */
  --focus-ring: var(--canopy);

  /* Type — Brandbook §4 */
  --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — Brandbook §4, base 16px */
  --fs-hero:  3.5rem;
  --fs-h1:    2.25rem;
  --fs-h2:    1.75rem;
  --fs-h3:    1.25rem;
  --fs-body:  1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --radius: 6px;
  --shadow-card: 0 1px 3px rgba(42, 42, 42, 0.08);
}

/* ---------------------------------------------------------------------------
 * Baseline behaviour every Arbor surface should share.
 * ------------------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--grove);
}

code, pre, .mono, .token {
  font-family: var(--font-mono);
}

/* A visible focus indicator on every interactive element. The SPAs used to
   clear `outline` on inputs and replace it with a 12%-opacity box-shadow,
   which is not a perceivable focus indicator. */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Keyboard-only skip link. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--grove);
  color: var(--paper);
  padding: 12px 20px;
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
  left: 0;
}

/* Screen-reader-only text that stays reachable by assistive tech. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}