@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@400;700&family=Fraunces:ital,wght@1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* Colour tokens — dark theme (default) */
  --bg: #141414;
  --fg: #d4cec4;

  /* Accent palette — apply the following SEMANTIC ROLES consistently
     across the app:
       --accent-lime    : good        (on-track, healthy values, 100% compliance,
                                       long days-since-last on bad things)
       --accent-magenta : concerning  (clinical concern, recent serious events,
                                       flag-for-vet items)
       --accent-orange  : attention   (sub-optimal, mid-range concern, recent
                                       missed med — not clinical)
       --accent-blue    : info        (informational/observational data emphasis)
       --accent-yellow  : reserved
       --accent-red     : reserved (intentionally NOT used for system warnings;
                                    technical alerts have their own quarantined
                                    token — see --system-warning below)
     Neutral data uses --fg (labels, names, normal numbers without valence).
     Muted/absent uses --muted (e.g. days-since "—" when never recorded). */
  --accent-lime: #c0fc04;
  --accent-magenta: #ea027e;
  --accent-blue: #3601fb;
  --accent-orange: #ff5500;
  --accent-yellow: #ffd84d;
  --accent-red: #ff3333;

  /* System-level technical alerts ONLY — API failures, save failures, sync
     errors, data integrity warnings, deploy-lag failures. QUARANTINED from
     clinical/health data: never use this token to colour anything about
     the dog's health. For health-data severity, use --accent-magenta
     (concerning) or --accent-orange (sub-optimal). */
  --system-warning: #ff1a3c;

  --muted: #a09a8f;
  --surface: #1d1d20;
  --border: #2a2a2d;

  /* Semi-transparent tints derived from accents.
     Variable-ised so the light theme can swap them together with the
     accent hue. */
  --edit-tint: rgba(192, 252, 4, 0.04);
  --delete-tint: rgba(234, 2, 126, 0.05);
  --banner-tint: rgba(192, 252, 4, 0.06);
  /* Tint for outlined navigational/instructional buttons on hover.
     Same magenta hue as --accent-magenta but at low opacity so the
     hover reads as a faint wash, not a fill. Light/dark theme
     versions use the corresponding accent-magenta channel. */
  --instructional-tint: rgba(234, 2, 126, 0.08);
  --modal-overlay: rgba(0, 0, 0, 0.85);

  /* Card tints — subtle washes for differentiating at-a-glance cards on
     Home. ~5-7% opacity matches the --edit-tint / --banner-tint family.
     Blue is slightly higher because the dark blue hue reads weaker at
     low opacity than the brighter lime/magenta. */
  --card-tint-magenta: rgba(234, 2, 126, 0.05);
  --card-tint-lime:    rgba(192, 252, 4, 0.05);
  --card-tint-blue:    rgba(54, 1, 251, 0.07);

  /* Font tokens */
  --font-display: 'Archivo Narrow', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Fraunces', Georgia, serif;

  /* Semantic entry-type tokens */
  --type-meal: var(--accent-lime);
  --type-symptom: var(--accent-magenta);
  --type-stool: var(--accent-orange);
  --type-observation: var(--accent-blue);
}

[data-theme="light"] {
  --bg: #f5f3ee;
  --fg: #1f1f1f;
  --surface: #ebe8e0;
  --border: #cec9bf;
  --muted: #6b6760;

  /* Accents darkened for readable contrast on a light background
     while remaining hue-recognisable as dots and borders. */
  --accent-lime: #4a7d00;
  --accent-magenta: #c6006a;
  --accent-blue: #2800c4;
  --accent-orange: #c44400;
  --accent-yellow: #b07a00;
  --accent-red: #b71919;

  /* Light-mode darkening of system-warning, same pattern as the other
     accents. Reserved for technical/system alerts only. */
  --system-warning: #c1112e;

  --edit-tint: rgba(74, 125, 0, 0.06);
  --delete-tint: rgba(198, 0, 106, 0.06);
  --banner-tint: rgba(74, 125, 0, 0.08);
  --instructional-tint: rgba(198, 0, 106, 0.08);
  --modal-overlay: rgba(20, 20, 20, 0.55);

  /* Card tints — light-mode versions, slightly higher opacity to remain
     visible against the lighter --surface. */
  --card-tint-magenta: rgba(198, 0, 106, 0.06);
  --card-tint-lime:    rgba(74, 125, 0, 0.06);
  --card-tint-blue:    rgba(40, 0, 196, 0.06);
}

/* ---------- Site-wide pet identity strip ----------
   Sits below the main nav, above page content. Full-width band with
   background wash and rules; inner text constrained to a page-width
   container so it aligns with page content margin rather than flushing
   against the viewport edge. Identical on all four household pages. */
.identity-strip {
  background: var(--card-tint-blue);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
}

.identity-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
}

@media (max-width: 600px) {
  .identity-strip-inner { padding: 0 16px; }
}