/*
 * Design tokens – Apple-like "comfort" style (see docs/DESIGN.md).
 * Every color in the app comes from a token here. Themes: light, dark, white-blue, black-blue.
 * Default follows the device (prefers-color-scheme).
 */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI Variable", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-round: ui-rounded, "SF Pro Rounded", var(--font);
  --radius: 18px;
  --radius-sm: 12px;
  --radius-xs: 9px;
  --space: 16px;
  --tap: 50px;

  /* iOS system colors (light) */
  --accent: #007aff;
  --accent-contrast: #ffffff;
  --ok: #34c759;
  --warn: #ff9500;
  --bad: #ff3b30;
  --purple: #af52de;
  --pink: #ff2d55;
  --teal: #30b0c7;
  --indigo: #5856d6;
  --mint: #00c7be;

  --bg: #f2f2f7;            /* systemGroupedBackground */
  --surface: #ffffff;       /* secondarySystemGroupedBackground */
  --surface-2: #f2f2f7;
  --fill: rgba(118, 118, 128, 0.12);   /* tertiarySystemFill – inputs, segmented */
  --fill-strong: rgba(118, 118, 128, 0.2);
  --text: #000000;
  --text-2: rgba(60, 60, 67, 0.85);
  --muted: rgba(60, 60, 67, 0.6);      /* secondaryLabel */
  --border: rgba(60, 60, 67, 0.18);    /* separator */
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 20px rgba(0, 0, 0, 0.05);
  --bar: rgba(249, 249, 249, 0.78);    /* translucent bars */
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --accent: #0a84ff; --ok: #30d158; --warn: #ff9f0a; --bad: #ff453a; --purple: #bf5af2; --pink: #ff375f; --teal: #40c8e0; --indigo: #5e5ce6; --mint: #63e6e2;
    --bg: #000000; --surface: #1c1c1e; --surface-2: #2c2c2e;
    --fill: rgba(118, 118, 128, 0.24); --fill-strong: rgba(118, 118, 128, 0.36);
    --text: #ffffff; --text-2: rgba(235, 235, 245, 0.85); --muted: rgba(235, 235, 245, 0.6); --border: rgba(84, 84, 88, 0.6);
    --shadow: none; --bar: rgba(22, 22, 24, 0.78);
    color-scheme: dark;
  }
}

:root[data-theme="light"] { color-scheme: light; }

:root[data-theme="dark"] {
  --accent: #0a84ff; --ok: #30d158; --warn: #ff9f0a; --bad: #ff453a; --purple: #bf5af2; --pink: #ff375f; --teal: #40c8e0; --indigo: #5e5ce6; --mint: #63e6e2;
  --bg: #000000; --surface: #1c1c1e; --surface-2: #2c2c2e;
  --fill: rgba(118, 118, 128, 0.24); --fill-strong: rgba(118, 118, 128, 0.36);
  --text: #ffffff; --text-2: rgba(235, 235, 245, 0.85); --muted: rgba(235, 235, 245, 0.6); --border: rgba(84, 84, 88, 0.6);
  --shadow: none; --bar: rgba(22, 22, 24, 0.78);
  color-scheme: dark;
}

:root[data-theme="white-blue"] {
  --accent: #0062e6;
  --bg: #eaf1ff; --surface: #ffffff; --surface-2: #f3f7ff;
  --fill: rgba(0, 72, 180, 0.08); --fill-strong: rgba(0, 72, 180, 0.14);
  --text: #0a1a3a; --text-2: rgba(10, 26, 58, 0.85); --muted: rgba(10, 26, 58, 0.55); --border: rgba(0, 60, 160, 0.14);
  --bar: rgba(240, 246, 255, 0.8);
  color-scheme: light;
}

:root[data-theme="black-blue"] {
  --accent: #3d8bff; --ok: #30d158; --warn: #ff9f0a; --bad: #ff453a;
  --bg: #02060f; --surface: #0b1426; --surface-2: #122039;
  --fill: rgba(120, 160, 255, 0.14); --fill-strong: rgba(120, 160, 255, 0.22);
  --text: #eef3ff; --text-2: rgba(230, 237, 255, 0.85); --muted: rgba(200, 214, 245, 0.58); --border: rgba(120, 150, 220, 0.22);
  --shadow: none; --bar: rgba(6, 12, 26, 0.8);
  color-scheme: dark;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.page { max-width: 560px; margin: 0 auto; padding: calc(var(--space) * 1.5) var(--space); }

.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px;
}

h1 { font-size: 34px; line-height: 1.12; font-weight: 700; letter-spacing: 0.01em; margin: 0 0 6px; }
p.muted, .muted { color: var(--muted); }

label { display: block; font-size: 13px; font-weight: 500; margin: 16px 4px 6px; color: var(--muted); text-transform: none; }
input, select {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  font: inherit;
  font-size: 17px; /* >=16px prevents iOS zoom */
  color: var(--text);
  background: var(--fill);
  border: 0;
  border-radius: var(--radius-sm);
  outline: none;
  transition: box-shadow .15s;
  -webkit-appearance: none;
  appearance: none;
}
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
input::placeholder, textarea::placeholder { color: var(--muted); }

button {
  width: 100%;
  min-height: var(--tap);
  margin-top: 18px;
  padding: 0 18px;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  color: var(--accent-contrast);
  background: var(--accent);
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease, background-color .2s;
}
button:active { transform: scale(0.97); opacity: .85; }
button:disabled { opacity: .45; cursor: default; transform: none; }
button.secondary { background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); }

.error { color: var(--bad); margin-top: 12px; min-height: 1.2em; font-size: 15px; }
.link { color: var(--accent); text-decoration: none; }
.center { text-align: center; }
[hidden] { display: none !important; }

/* ---------- Auth pages (login, password, 2FA) ---------- */
.auth-page { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding-bottom: 12vh; }
.auth-logo {
  width: 72px; height: 72px; border-radius: 18px; margin: 0 auto 18px;
  background: linear-gradient(145deg, #3b8bff, #0051d5); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 35%, transparent);
}
.auth-logo svg { width: 42px; height: 42px; }
.auth-page h1 { text-align: center; font-size: 30px; }
.auth-page > p.muted { text-align: center; margin: 0 0 22px; }
.auth-page .card { padding: 6px 18px 18px; }

/* ---------- Welcome (customer start page) ---------- */
.serif { font-family: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-style: italic; font-weight: 600; letter-spacing: -0.01em; }
.welcome { justify-content: center; }
.hero {
  background: var(--surface); border-radius: 26px; padding: 30px 22px 26px; text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 50px rgba(0,0,0,.08);
}
.hero h1.serif { font-size: 40px; line-height: 1.08; margin: 4px 0 12px; }
.hero-sub { color: var(--text-2); font-size: 17px; margin: 0 auto 22px; max-width: 300px; line-height: 1.4; }
.wa-badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 99px; background: #25d366; color: #fff;
  font-weight: 700; font-size: 17px; text-decoration: none;
  box-shadow: 0 8px 22px rgba(37, 211, 102, .35); transition: transform .12s ease;
}
.wa-badge:active { transform: scale(.97); }
.switch-line { margin: 24px 0 8px; color: var(--muted); font-size: 15px; }
.link-inline { width: auto; min-height: 0; margin: 0; padding: 0; background: none; color: var(--accent); font-weight: 600; font-size: 15px; }
.form-title { font-size: 22px; margin: 14px 0 0; }
#login-form { margin-top: 16px; animation: sheetin .35s cubic-bezier(.2,.8,.2,1); }
@keyframes sheetin { from { opacity: 0; transform: translateY(12px); } }
.coach-link { margin-top: 28px; }
.small { font-size: 13px; }
.auth-logo.coach { background: linear-gradient(145deg, #3a3a3c, #1c1c1e); }
body.coach-login { background: var(--bg); }
.brand-accent { color: var(--accent); }