/* GaitAI Care theme — loaded after every other stylesheet so it settles ties.
   Palette: muted midnight navy, restrained gold, warm off-white, graphite text, subtle borders.
   No electric blue, no neon, no decorative gradients. Light is the default; [data-theme=dark] restates it.
   Fonts: the GaitAI site uses Inter / Space Grotesk; this app makes no external font requests (CSP 'self'),
   so it uses the system sans stack with matching weights and tracking. */

:root {
  --bg: #f7f6f2;
  --surface: #ffffff;
  --ink: #1c2940;
  --muted: #4a5f7a;
  --line: #e2e4e9;
  --brand: #0b1739;
  --brand-dark: #07102a;
  --light: #eef0f5;
  --peach: #f8f2e6;
  --warning: #8a6320;
  --accent: #8a6320;
  --accent-soft: rgb(138 99 32 / 0.1);
  --shadow: 0 1px 2px rgb(11 23 57 / 0.04), 0 10px 28px -18px rgb(11 23 57 / 0.25);
  --gc-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

[data-theme=dark] {
  --bg: #0b1220;
  --surface: #131c2f;
  --ink: #ece9e1;
  --muted: #a3adbd;
  --line: #26324b;
  --brand: #c9a44c;
  --brand-dark: #b08a35;
  --light: #1b2740;
  --peach: #2a2416;
  --warning: #d9b45f;
  --accent: #c9a44c;
  --accent-soft: rgb(201 164 76 / 0.12);
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 30px -20px rgb(0 0 0 / 0.7);
  color-scheme: dark;
}

body { font-family: var(--gc-sans); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }

/* Display type: clean sans with tight tracking instead of the inherited serif. */
h1, h2, h3, .hero h1, .authcard h1 { font-family: var(--gc-sans) !important; letter-spacing: -0.02em; font-weight: 650; }

/* On dark, the brand colour is gold: text on brand surfaces is navy, not white. */
[data-theme=dark] .btn:not(.ghost):not(.alt):not(.secondary),
[data-theme=dark] .chip.active,
[data-theme=dark] .logo { color: #0b1220 !important; }

.btn { border-radius: 999px; transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.btn:not(.ghost):not(.alt):hover { background: var(--brand-dark); }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.eyebrow { color: var(--accent) !important; letter-spacing: .14em; }

/* ── GaitAI brand row (sign-in cards, sidebar) ─────────────────────── */
.gc-brand { display: flex; align-items: center; gap: 12px; }
.gc-logo { height: 34px; width: auto; display: block; }
.gc-logo-dark { display: none; }
[data-theme=dark] .gc-logo-light { display: none; }
[data-theme=dark] .gc-logo-dark { display: block; }
.gc-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.gc-brand-name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--ink); }
.gc-brand-name b { color: var(--accent); font-weight: 700; }
.gc-brand-tag { font-size: 12px; color: var(--muted); }
/* Narrow sidebar: logo and product name only; the tagline lives on the sign-in card. */
.sidebar .gc-brand { gap: 10px; }
.sidebar .gc-brand-tag { display: none; }
.sidebar .gc-brand-name { font-size: 14px; white-space: nowrap; }

/* ── Sign-in page ─────────────────────────────────────────────────── */
.authpage { background: var(--bg); padding: 24px 16px; }
.authcard { border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.gc-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); margin: 6px 0 16px; line-height: 1.5; }
.gc-consent input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--brand); }
.gc-consent a, .gc-link { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); text-underline-offset: 3px; }
.gc-note { font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); margin-top: 20px; padding-top: 14px; line-height: 1.55; }
.gc-verify-email { font-weight: 650; color: var(--ink); word-break: break-all; }

@media (max-width: 480px) {
  .authcard { padding: 26px 20px !important; border-radius: 16px; }
  .gc-logo { height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}