/* GPR brand theme (M6). This file *overrides* the neutral M0 tokens with the
   joyful guinea-pig "test crew" identity (Design Brief §3). Because everything is
   tokenized, this whole file is a theme — a V2 tenant swaps it for their own and
   the components don't change (D-22). Load AFTER styles.css. */
:root {
  /* Warm primary — tangerine/marigold for energy + CTAs */
  --color-primary: #f4a024;
  --color-primary-text: #2b2a28;
  --color-primary-hover: #e0901a;
  /* Trust secondary — sky/teal for links + info */
  --color-secondary: #2ea6b8;
  /* Ground neutrals — warm off-white paper, soft charcoal ink */
  --color-bg: #fbf7f0;
  --color-surface: #ffffff;
  --color-text: #2b2a28;
  --color-muted: #6b6862;
  --color-border: #ece3d4;
  /* Status accents (functional, reserved) */
  --color-ok: #2f7d4f;
  --color-warn: #b07d12;
  --color-err: #b3402f;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(43, 42, 40, 0.08);
  --font-display: "Baloo 2", "Quicksand", var(--font);
}

body { background: radial-gradient(1200px 480px at 50% -10%, #fff6e6 0%, var(--color-bg) 60%); }

h1, h2, .brand-wordmark { font-family: var(--font-display); letter-spacing: -0.01em; }

.card { box-shadow: var(--shadow); border-radius: var(--radius); }

button {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-radius: 999px;
  transition: transform 0.06s ease, background 0.15s ease;
}
button:hover { background: var(--color-primary-hover); }
button:active { transform: translateY(1px); }
a { color: var(--color-secondary); }

/* Brand chrome */
.topbar { display: flex; align-items: center; gap: 10px; padding: 18px 0 4px; }
.topbar img { height: 34px; }
.hero-mascot { display: block; margin: 0 auto 8px; width: 132px; height: 132px; }
.dotted-path { border: 0; border-top: 2px dotted var(--color-border); margin: 20px 0; }
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  background: #eaf6f8; color: #1c6e7c; font-size: 0.78rem; font-weight: 700;
}

/* Accessibility: visible focus + reduced motion (WCAG 2.2 AA) */
:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
  * { scroll-behavior: auto !important; }
}