/*
 * ACFC Wellness design tokens.
 * Palette + type extracted from the iOS app theme:
 *   /Users/sachb/acfc-wellness/PlayerSurveys/Shared/Theme/Theme.swift
 *   + Assets.xcassets/*.colorset (light & dark sRGB components, converted to hex).
 * Muted / emotion-neutral surfaces, deep-rose accent, rounded display type.
 * Light is the default; dark mirrors the iOS dark appearance via prefers-color-scheme.
 */

/* Rounded display face for non-Apple devices (the Android target): SF Pro Rounded
 * is Apple-only, so self-host Nunito (variable font, full weight axis) as the
 * rounded fallback. Bundled offline — no CDN — so the PWA works without network. */
@font-face {
  font-family: "Nunito";
  src: url("/static/fonts/nunito-var.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Surfaces (light) --- */
  --bg-base: #FFFFFF;       /* BgBase   light 1.000,1.000,1.000 */
  --bg-surface: #F7F7F7;    /* BgSurface light 0.969 */
  --bg-elevated: #EEEEEE;   /* BgElevated light 0.933 */

  /* --- Text (light) --- */
  --text-primary: #0A0A0A;  /* TextPrimary   light 0.039 */
  --text-secondary: #666666;/* TextSecondary light 0.400 */

  /* --- Accent (deep rose) --- */
  --accent: #F2D4D7;        /* Accent  0.949,0.831,0.843 — pale fill tint */
  --accent-soft: #F8D6E3;   /* AccentSoft light 0.973,0.839,0.890 */
  --accent-ink: #C2185B;    /* readable rose ink (Theme.swift literal 0xC2185B) */

  /* --- Semantic (light) --- */
  --success: #1C8B4D;       /* Success light 0.110,0.545,0.302 */
  --warning: #B8860B;       /* Warning light 0.722,0.525,0.043 */
  --danger:  #BE1239;       /* Danger  light 0.745,0.071,0.235 */

  /* --- Pain / exertion heat-strip (VAS-10, CR10) — iOS literals, CONSTANT in
   *     light + dark. Low pain is YELLOW, never green: pain is not a good/bad
   *     traffic light, it's a severity gradient (matches iOS painColor). --- */
  --pain-lo: #FACD14;
  --pain-mid: #FA730F;
  --pain-hi: #F04444;

  /* --- Body-map severity (iOS BodyMapColors) — CONSTANT in light + dark.
   *     One source for all three severity surfaces (silhouette + legend). --- */
  --sev-mild: #FFD700;
  --sev-mod: #FF8C00;
  --sev-severe: #FF4444;
  --sev-mild-a: 0.55;
  --sev-mod-a: 0.65;
  --sev-severe-a: 0.75;

  /* --- Shape / spacing (from Theme.swift) --- */
  --radius: 14px;           /* Theme.cornerRadius */
  --radius-sm: 10px;
  --radius-pill: 999px;
  --space: 16px;            /* Theme.spacing */
  --space-sm: 8px;
  --space-lg: 24px;

  /* --- Type: rounded display, system body --- */
  --font-display: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --weight-heavy: 800;      /* largeTitle .heavy */
  --weight-bold: 700;       /* title .bold */
  --weight-semibold: 600;   /* headline .semibold */
  --weight-medium: 500;     /* caption .medium */

  /* --- Elevation --- */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --hairline: rgba(0, 0, 0, 0.08);
  --seg-thumb: #FFFFFF;     /* selected segmented thumb (light: white, lighter than track) */
}

/* Dark appearance. tokens.css is the SINGLE source for every theme state
 * (settings.css no longer restates the palette):
 *   - system dark, UNLESS the athlete forced Light in the Appearance picker
 *   - the manual Dark choice, regardless of the system setting
 * The two dark blocks are identical by necessity — a media query and an
 * attribute selector can't be merged. Edit both if a dark token changes. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-base: #0A0A0A;        /* BgBase   dark 0.039 */
    --bg-surface: #181818;     /* BgSurface dark 0.094 */
    --bg-elevated: #242424;    /* BgElevated dark 0.141 */

    --text-primary: #FFFFFF;   /* TextPrimary   dark 1.000 */
    --text-secondary: #999999; /* TextSecondary dark 0.600 */

    --accent: #F2D4D7;         /* Accent unchanged in dark */
    --accent-soft: #3A0E22;    /* AccentSoft dark 0.227,0.055,0.133 */
    --accent-ink: #F2D4D7;     /* on dark, the pale rose reads as ink */

    --success: #22C55E;        /* Success dark 0.133,0.773,0.369 */
    --warning: #FACD15;        /* Warning dark 0.980,0.800,0.082 */
    --danger:  #EF4444;        /* Danger  dark 0.937,0.267,0.267 */

    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5);
    --hairline: rgba(255, 255, 255, 0.10);
    --seg-thumb: #3A3A3C;      /* dark: lighter than the #242424 track */
  }
}

:root[data-theme="dark"] {
  --bg-base: #0A0A0A;
  --bg-surface: #181818;
  --bg-elevated: #242424;
  --text-primary: #FFFFFF;
  --text-secondary: #999999;
  --accent: #F2D4D7;
  --accent-soft: #3A0E22;
  --accent-ink: #F2D4D7;
  --success: #22C55E;
  --warning: #FACD15;
  --danger:  #EF4444;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5);
  --hairline: rgba(255, 255, 255, 0.10);
  --seg-thumb: #3A3A3C;
}

/* --- Base element styling --- */
* {
  box-sizing: border-box;
}

html, body, #root {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* respect notches / home indicator */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  margin: 0 0 var(--space-sm);
  letter-spacing: -0.01em;
}

h2 { font-weight: var(--weight-bold); }
h3 { font-weight: var(--weight-semibold); }

a {
  color: var(--accent-ink);
  text-decoration: none;
}

button {
  font-family: var(--font-body);
}

/* --- Reusable primitives (eyeballed, on-brand; not pixel parity) --- */
.acfcw-card {
  background: var(--bg-surface);
  border-radius: var(--radius);
  padding: var(--space);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--hairline);
}

.acfcw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 48px;
  padding: 0 var(--space-lg);
  border: none;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  background: var(--accent-ink);
  color: #FFFFFF;
}

.acfcw-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.acfcw-btn--ghost {
  background: transparent;
  color: var(--accent-ink);
  border: 1px solid var(--hairline);
}

.acfcw-muted {
  color: var(--text-secondary);
}

.acfcw-app {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space);
}