/* site/assets/brand.css - Clear Cities Pharmacy design tokens (spec section 3).
   --navy and --teal were MEASURED from brand-assets/clearcities-logo.jpg; every
   contrast ratio was computed. Do not substitute values.
   This is the ONLY stylesheet allowed to contain a colour literal (guard G6).

   HARD RULE: --teal (#27B4D0) is 2.46:1 on white. It is DECORATIVE ONLY - hairlines,
   the hover underline, the wave. Never `color: var(--teal)`, never a background behind
   text, and not the focus ring either (a focus indicator is non-text UI needing 3:1).
   Anything a person reads, clicks or focuses in teal uses --teal-deep. */
:root {
  /* colour */
  --navy: #464565;        /* headings, primary mark - 9.13:1 on white */
  --navy-ink: #2E2E45;    /* body text - 13.18:1 on white */
  --teal: #27B4D0;        /* DECORATIVE ONLY - 2.46:1 */
  /* Amended 2026-09-21 (spec 3.1): was #17808F, which cleared 4.5:1 on white but only
     reached 4.23:1 on the soft panel. Both text surfaces are checked now, not white alone. */
  --teal-deep: #137280;   /* links, button fills - 5.61:1 white, 5.11:1 soft panel */
  --teal-tint: #E3F5F9;   /* pill / highlight backgrounds only */
  --paper: #FFFFFF;
  --paper-soft: #F4F4F8;  /* alternating panels - navy-ink on it 12.02:1 */
  --line: #E5E5EC;        /* hairlines, input borders */
  /* Amended 2026-09-21 (spec 3.1): was #6B7288, 4.36:1 on the soft panel. */
  --muted: #646B80;       /* secondary text - 5.31:1 white, 4.84:1 soft panel */
  --error: #B3261E;       /* validation only - 6.54:1 */
  --success: #1E7F5C;     /* confirmation only - 4.95:1 */
  --shadow-card: 0 1px 2px rgba(46, 58, 107, .04), 0 8px 24px rgba(46, 58, 107, .06);
  --header-bg: rgba(255, 255, 255, .92);

  /* type */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-text: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* shape + layout */
  --radius-card: 12px;
  --radius-ctl: 8px;
  --radius-pill: 999px;
  --wrap: 1120px;
  --gutter: var(--s-5);
  --section-y: var(--s-8);
  --header-h: 60px;
}
@media (min-width: 900px) {
  :root { --gutter: var(--s-7); --section-y: var(--s-10); --header-h: 72px; }
}