/* LA MESA — Juntos brand tokens (Phase A: brand foundation; Phase C: component states)
   Linked into all public/staff pages — see CLAUDE.md Phase A/B/C notes.
   Source: Juntos Branding Guide (navy / teal / coral / amber / sage / purple system). */

:root {
  /* Brand core */
  --navy:        #061d2d;
  --navy-2:      #0b2638;
  --navy-3:      #122f43;
  --teal:        #066164;
  --teal-2:      #00797a;
  --teal-3:      #0a8f90;
  --teal-pale:   #e8f4f4;

  /* Neutrals */
  --cream:       #f7f8f6;
  --surface:     #ffffff;
  --line:        #d9e1e3;
  --slate:       #4c6f77;
  --muted:       #8199a0;
  --soft:        #eef3f4;

  /* Semantic / status accents */
  --coral:       #b8665a;
  --coral-light: #f9eeea;
  --coral-dark:  #9c5347;
  --amber:       #c4894a;
  --amber-light: #faf0e4;
  --amber-dark:  #a5723a;
  --sage:        #5f9179;
  --sage-light:  #e9f3ee;
  --sage-dark:   #4a7763;
  --purple:      #7c5aaf;
  --purple-light:#f1ecfb;

  /* Layout */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;

  --shadow-sm: 0 1px 3px rgba(6,29,45,.08), 0 1px 2px rgba(6,29,45,.04);
  --shadow-md: 0 8px 24px rgba(6,29,45,.10), 0 2px 6px rgba(6,29,45,.05);
  --shadow-lg: 0 20px 50px rgba(6,29,45,.16), 0 4px 14px rgba(6,29,45,.06);
}

/* Phase C: consistent keyboard-focus ring across every page this stylesheet is linked
   into. Several pages set `outline: none` on inputs without a replacement — this
   restores a visible, on-brand focus state for keyboard users on any focusable element,
   layered on top of (not replacing) any per-element :focus border/color change. */
:focus-visible {
  outline: 2px solid var(--teal-2);
  outline-offset: 2px;
}