/* FitnessOS — Base: tokens, themes, reset, keyframes */

:root {
  /* Spacing */
  --nav-h: 64px;
  --safe: env(safe-area-inset-bottom, 0px);
  --top-safe: env(safe-area-inset-top, 0px);

  /* Border radius */
  --r8: 6px; --r12: 9px; --r14: 11px; --r16: 12px;
  --r20: 14px; --r24: 16px; --r32: 20px; --r999: 999px;

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font);
  --font-display-nums: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Narrow Bold", sans-serif;
  --type-display: clamp(1.75rem, 4vw, 2.25rem);
  --type-title: 1.375rem;
  --type-heading: 1.125rem;
  --type-body: 1rem;
  --type-label: 0.8125rem;
  --type-caption: 0.75rem;
  --lh-tight: 1.2;
  --lh-body: 1.5;
  --tracking-label: 0.06em;

  /* Motion */
  --dur-fast: 120ms;
  --dur-med: 220ms;
  --dur-slow: 360ms;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --snap: cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadows / elevation */
  --ds1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --ds2: 0 4px 16px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.1);
  --ds3: 0 8px 32px rgba(0,0,0,0.24), 0 4px 12px rgba(0,0,0,0.12);
  --elev-1: var(--ds1);
  --elev-2: var(--ds2);
  --elev-3: var(--ds3);
}

/* ══ DARK THEME (default) ══════════════════════════════ */
[data-theme="dark"],
[data-theme="carbon"], [data-theme="stealth"], [data-theme="forest"],
[data-theme="electric"], [data-theme="sunset"], [data-theme="aurora"],
[data-theme="midnight"], [data-theme="arctic"] {
  color-scheme: dark;

  /* Backgrounds - layered depth */
  --bg:   #121212;
  --bg2:  #181818;
  --bg3:  #1e1e1e;
  --bg4:  #242424;
  --bg5:  #2c2c2c;

  /* Text */
  --txt:  #ffffff;
  --txt2: rgba(255,255,255,0.78);
  --txt3: rgba(255,255,255,0.55);
  --txt4: rgba(255,255,255,0.32);

  /* Borders */
  --border:  rgba(255,255,255,0.08);
  --border2: rgba(255,255,255,0.14);

  /* Card */
  --card-bg: rgba(255,255,255,0.04);
  --card-bg2: rgba(255,255,255,0.06);

  /* Input */
  --input-bg: #18181f;

  /* Semantic (same names every theme) */
  --surface: var(--bg2);
  --surface-2: var(--bg3);
  --layer-0: transparent;
  --layer-1: var(--bg3);
  --layer-2: var(--bg4);
  --layer-3: var(--bg5);
  --text: var(--txt);
  --text-muted: var(--txt3);
  --accent: var(--c1);
  --accent-contrast: #ffffff;
  --success: #30d158;
  --warn: #ff9f0a;
  --danger: #ff453a;
}

/* ══ LIGHT THEME ═══════════════════════════════════════ */
[data-theme="light"] {
  color-scheme: light;

  /* Stronger secondary text for WCAG — was 0.42/0.68 (fail on muted captions) */
  --txt2: rgba(10,10,15,0.78);
  --txt3: rgba(10,10,15,0.58);
  --txt4: rgba(10,10,15,0.36);

  --bg:   #f2f2f7;
  --bg2:  #ffffff;
  --bg3:  #f8f8fb;
  --bg4:  #ededf2;
  --bg5:  #e5e5ea;

  --txt:  #0a0a0f;

  --border:  rgba(0,0,0,0.08);
  --border2: rgba(0,0,0,0.14);

  --card-bg: rgba(255,255,255,0.9);
  --card-bg2: rgba(255,255,255,0.95);

  --input-bg: #ffffff;

  /* Semantic (same names as dark) */
  --surface: var(--bg2);
  --surface-2: var(--bg3);
  --layer-0: transparent;
  --layer-1: var(--bg3);
  --layer-2: var(--bg4);
  --layer-3: var(--bg5);
  --text: var(--txt);
  --text-muted: var(--txt3);
  --accent: var(--c1);
  --accent-contrast: #ffffff;
  --success: #248A3D;
  --warn: #B25000;
  --danger: #C41E3A;
}

/* ══ BRAND ACCENTS (dark / light only — no color theme variants) ══ */

[data-theme="dark"],
[data-theme="carbon"], [data-theme="stealth"], [data-theme="forest"],
[data-theme="electric"], [data-theme="sunset"], [data-theme="aurora"],
[data-theme="midnight"], [data-theme="arctic"] {
  --c1: #FF7A1A; --c1-rgb: 255,122,26;
  --c2: #FF9F0A; --c2-rgb: 255,159,10;
  --c3: #30D158; --c3-rgb: 48,209,88;
  --c4: #FF453A; --c4-rgb: 255,69,58;
  --c5: #FFD60A; --c5-rgb: 255,214,10;
  --grad: linear-gradient(128deg, #FF7A1A 0%, #E86A0E 55%, #FF9F0A 100%);
  --grad2: linear-gradient(128deg, #E86A0E 0%, #FF7A1A 100%);
  --orb1: #FF7A1A; --orb2: #E86A0E;
  --shadow: 0 10px 30px rgba(255,122,26,0.14);
  --glow: rgba(255,122,26,0.2);
}

/* Light: accent-text family for labels; fills stay Ember orange */
[data-theme="light"] {
  --c1: #B44A00; --c1-rgb: 180,74,0;
  --c2: #E86A0E; --c2-rgb: 232,106,14;
  --c3: #248A3D; --c3-rgb: 36,138,61;
  --c4: #C41E3A; --c4-rgb: 196,30,58;
  --c5: #B25000; --c5-rgb: 178,80,0;
  --grad: linear-gradient(128deg, #FF7A1A 0%, #E86A0E 55%, #FF9F0A 100%);
  --grad2: linear-gradient(128deg, #E86A0E 0%, #FF7A1A 100%);
  --orb1: #FF7A1A; --orb2: #E86A0E;
  --shadow: 0 4px 24px rgba(196,30,58,0.12);
  --glow: rgba(196,30,58,0.12);
}

/* ══ RESET ══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--txt);
  overflow: hidden;
  height: 100vh;
  height: 100svh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  /* Dark: chalkboard gym log — muted slate + dust */
  background-image:
    radial-gradient(120% 80% at 50% -20%, rgba(255,69,58,0.07), transparent 55%),
    radial-gradient(80% 60% at 100% 100%, rgba(255,59,48,0.05), transparent 50%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"),
    linear-gradient(168deg, #121212 0%, #181818 42%, #121212 100%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  /* Chalk smudge lines */
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 47px, rgba(255,255,255,0.015) 47px, rgba(255,255,255,0.015) 48px),
    repeating-linear-gradient(90deg, transparent, transparent 31px, rgba(255,255,255,0.008) 31px, rgba(255,255,255,0.008) 32px);
  z-index: 0;
}

/* The decorative backdrop above is a DARK painting — in light mode it buries
   the light background-color and every translucent card composites over it.
   Light gets its own soft wash. */
[data-theme="light"] body {
  /* Light: aged journal paper + warm grain */
  background-image:
    radial-gradient(90% 70% at 12% 8%, rgba(255,224,74,0.08), transparent 45%),
    radial-gradient(70% 50% at 88% 92%, rgba(196,30,58,0.05), transparent 40%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.35'/%3E%3C/svg%3E"),
    linear-gradient(175deg, #f7f3ea 0%, #f0ebe0 48%, #ebe4d6 100%);
}
[data-theme="light"] body::after {
  opacity: 0.35;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(139,119,80,0.06) 27px, rgba(139,119,80,0.06) 28px);
}

input, button, select, textarea {
  font-family: var(--font);
  -webkit-appearance: none;
  appearance: none;
}

button { touch-action: manipulation; cursor: pointer; border: none; background: none; color: inherit; }
input[type=range] { -webkit-appearance: none; appearance: none; }

/* The reset above strips native checkboxes to nothing — every consent tick
   (onboarding, plan install) was invisible. Draw our own. */
input[type=checkbox] {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 2px solid var(--border2);
  border-radius: 7px;
  background: var(--bg3);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.12s, border-color 0.12s;
}
input[type=checkbox]::before {
  content: "";
  width: 13px;
  height: 13px;
  background: var(--accent-contrast, #fff);
  clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%);
  transform: scale(0);
  transition: transform 0.12s;
}
input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); }
input[type=checkbox]:checked::before { transform: scale(1); }
input[type=checkbox]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* ══ KEYFRAMES ══════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes slideUp {
  from { transform: translateY(100%); } to { transform: translateY(0); }
}
@keyframes slideDown {
  from { transform: translateY(0); } to { transform: translateY(100%); }
}
@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.82); }
  70%  { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50%       { transform: scale(1.08); opacity: 1; }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes shimmer {
  from { background-position: 200% center; }
  to   { background-position: -200% center; }
}
@keyframes prBounce {
  0%   { transform: scale(0) rotate(-12deg); opacity: 0; }
  65%  { transform: scale(1.18) rotate(3deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes ringFill {
  from { stroke-dashoffset: var(--ring-start); }
  to   { stroke-dashoffset: var(--ring-end); }
}
@keyframes entryIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastIn {
  from { transform: translateY(-80px) scale(0.9); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes toastOut {
  from { transform: translateY(0) scale(1); opacity: 1; }
  to   { transform: translateY(-80px) scale(0.9); opacity: 0; }
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes rdBreathe {
  0%,100% { transform: scale(1); opacity: 0.13; }
  50%      { transform: scale(1.08); opacity: 0.2; }
}

/* ══ UTILITY CLASSES ════════════════════════════════════ */
.press { transition: transform 0.12s var(--ease), opacity 0.12s; }
.press:active { transform: scale(0.95); opacity: 0.85; }
.tappable { cursor: pointer; touch-action: manipulation; }
.blur-bg { backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); }

/* Gradient text */
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Scrollbar hide */
.no-scroll { -ms-overflow-style: none; scrollbar-width: none; }
.no-scroll::-webkit-scrollbar { display: none; }

/* Row helpers */
.row-between { display: flex; justify-content: space-between; align-items: center; }
.row-center  { display: flex; align-items: center; }

/* Athletic display typography */
h1, h2, h3, .topbar-title, .topbar-greeting, .btn, .nb span {
  font-family: var(--font);
  letter-spacing: 0.04em;
}