/* ============================================================================
   AinaDara Fitness — design tokens + base + core components.
   Tokens are inherited verbatim from the AinaDara brand (docs/DESIGN_SYSTEM.md).
   ============================================================================ */

:root {
  /* Brand palette — light */
  --paper:        #faf5ed;
  --paper-deep:   #f2ecdf;
  --paper-edge:   #e8e0d0;
  --ink:          #2d3428;
  --ink-soft:     #5a6151;
  --ink-faint:    #63675b;
  --terracotta:   #cc785c;
  --terracotta-q: #e0a98c;
  --purple:       #4a3d7a;
  --moss:         #4a5c28;
  --accent-text:  #b05c3c;
  --btn-bg:       #b35a3d;
  --on-accent:    #ffffff;
  --rule:         rgba(45, 52, 40, 0.10);

  /* Radii + shadow */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(45,52,40,0.05), 0 2px 8px rgba(45,52,40,0.05);
  --shadow:    0 1px 3px rgba(45,52,40,0.06), 0 6px 20px rgba(45,52,40,0.08);

  /* Layout */
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --nav-h: 64px;

  /* Semantic (mapped onto brand, never new hues) */
  --success: var(--moss);
  --accent:  var(--terracotta);
  --focus:   var(--purple);

  /* Active-profile identity color (overridden per profile at runtime) */
  --me: #cc785c;
}

:root[data-theme="dark"] {
  --paper:        #1c1815;
  --paper-deep:   #252119;
  --paper-edge:   #322d24;
  --ink:          #ece4d2;
  --ink-soft:     #b8af9d;
  --ink-faint:    #968d7b;
  --terracotta:   #d88a6e;
  --terracotta-q: #b56e54;
  --purple:       #8e7dc8;
  --moss:         #9aad68;
  --accent-text:  #e0a98c;
  --btn-bg:       #b35a3d;
  --on-accent:    #ffffff;
  --rule:         rgba(236, 228, 210, 0.10);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.3);
  --shadow:    0 1px 3px rgba(0,0,0,0.3), 0 6px 20px rgba(0,0,0,0.4);
}

/* SVG logo color auto-flip in dark mode */
[data-theme="dark"] svg [stroke="#cc785c"] { stroke: var(--terracotta); }
[data-theme="dark"] svg [fill="#cc785c"]   { fill:   var(--terracotta); }
[data-theme="dark"] svg [stroke="#4a3d7a"] { stroke: var(--purple); }
[data-theme="dark"] svg [fill="#4a3d7a"]   { fill:   var(--purple); }
[data-theme="dark"] svg [stroke="#4a5c28"] { stroke: var(--moss); }
[data-theme="dark"] svg [stroke="#2d3428"] { stroke: var(--ink-soft); }

.theme-transitioning, .theme-transitioning *, .theme-transitioning *::before, .theme-transitioning *::after {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease,
              fill 0.3s ease, stroke 0.3s ease !important;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* Visible keyboard focus for everyone (mouse users only suppressed). a11y sweep 2026-06-01. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
:focus:not(:focus-visible) { outline: none; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.55;
  min-height: 100dvh;
  background-image:
    radial-gradient(ellipse 1100px 760px at 12% 8%,  rgba(204,120,92,0.05), transparent 60%),
    radial-gradient(ellipse 900px 700px at 88% 70%,  rgba(74,61,122,0.03), transparent 60%),
    radial-gradient(ellipse 800px 600px at 50% 100%, rgba(74,92,40,0.025), transparent 60%);
  background-attachment: fixed;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
}
[data-theme="dark"] body {
  background-image:
    radial-gradient(ellipse 1100px 760px at 12% 8%,  rgba(216,138,110,0.08), transparent 60%),
    radial-gradient(ellipse 900px 700px at 88% 70%,  rgba(142,125,200,0.06), transparent 60%),
    radial-gradient(ellipse 800px 600px at 50% 100%, rgba(154,173,104,0.04), transparent 60%);
}
::selection { background: var(--terracotta); color: var(--paper); }

h1, h2, h3, .display { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; }
.mono, .num { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Paper grain overlay */
.noise-grain {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 9; opacity: 0.07; mix-blend-mode: multiply;
}
[data-theme="dark"] .noise-grain { opacity: 0.04; mix-blend-mode: screen; }

/* ── App shell layout ─────────────────────────────────────────────────────── */
.app { max-width: 1180px; margin: 0 auto; }
@media (min-width: 860px) {
  .app { display: grid; grid-template-columns: 248px 1fr; }
  body { padding-bottom: 0; }
}

main { padding: var(--gutter); padding-top: 1rem; }

/* Topbar (mobile) */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: max(1rem, env(safe-area-inset-top, 0px)) var(--gutter) 0.5rem;
  position: sticky; top: 0; z-index: 8;
  background: linear-gradient(var(--paper) 70%, transparent);
}
.brand { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--ink); }
.brand .wordmark { font-family: 'DM Serif Display', serif; font-size: 1.15rem; }
.brand .wordmark b { font-weight: 700; }

/* Page transitions */
.page { display: none; animation: fade 0.25s ease; }
.page.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .page { animation: none; } }

.page-title { font-size: clamp(1.9rem, 6vw, 2.6rem); line-height: 1.05; margin-bottom: 0.25rem; }
.page-sub { color: var(--ink-soft); margin-bottom: 1.5rem; font-size: 0.95rem; }

/* Cards */
.card {
  background: var(--paper-deep); border: 1px solid var(--paper-edge);
  border-radius: var(--r); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm);
  margin-bottom: 0.9rem;
}
.card h3 { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.95rem; }

/* Stat atom: big number + small label */
.stat .num { font-size: 1.9rem; color: var(--ink); line-height: 1; }
.stat .lbl { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 0.3rem; }

.eyebrow { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; }

/* Empty states — calm, never punitive */
.empty {
  border: 1px dashed var(--paper-edge); border-radius: var(--r);
  padding: 1.6rem; text-align: center; color: var(--ink-faint); background: transparent;
}
.empty .em-title { color: var(--ink-soft); font-weight: 500; margin-bottom: 0.25rem; }

/* Buttons + inputs */
.btn {
  font: inherit; font-weight: 500; border: 1px solid var(--paper-edge);
  background: var(--paper); color: var(--ink); border-radius: var(--r-sm);
  padding: 0.55rem 0.9rem; cursor: pointer; transition: transform 0.1s ease, background 0.2s ease;
}
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--btn-bg); color: var(--on-accent); border-color: transparent; }
.btn.ghost { background: transparent; }
.input, select.input {
  font: inherit; width: 100%; padding: 0.6rem 0.7rem; border: 1px solid var(--paper-edge);
  border-radius: var(--r-sm); background: var(--paper); color: var(--ink);
}
label.field { display: block; margin-bottom: 0.8rem; }
label.field .field-lbl { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.3rem; display: block; }

/* Profile chip + switcher */
.profile-switch { display: flex; gap: 0.4rem; }
.profile-chip {
  display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--paper-edge);
  background: var(--paper); border-radius: 999px; padding: 0.5rem 0.9rem 0.5rem 0.6rem;
  min-height: 44px; cursor: pointer; font-size: 0.85rem; color: var(--ink-soft);
}
.profile-chip .dot { width: 16px; height: 16px; border-radius: 50%; }
.profile-chip[aria-pressed="true"] { color: var(--ink); border-color: var(--me); box-shadow: 0 0 0 1px var(--me); }

/* Navigation — bottom tab bar (mobile) / sidebar (desktop) */
.nav {
  position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  display: flex; background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(16px); border-top: 1px solid var(--paper-edge);
  padding-bottom: env(safe-area-inset-bottom, 0px); z-index: 8;
}
.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; border: none; background: none; cursor: pointer; color: var(--ink-faint);
  font: inherit; font-size: 0.6rem; letter-spacing: 0.04em;
}
.nav-item svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-item[aria-current="page"] { color: var(--accent-text); font-weight: 600; }
.nav-item[aria-current="page"] svg { stroke-width: 2.1; }

@media (min-width: 860px) {
  .nav {
    position: sticky; top: 0; height: 100dvh; flex-direction: column; justify-content: flex-start;
    border-top: none; border-right: 1px solid var(--paper-edge); padding: 1.5rem 0.75rem; gap: 0.25rem;
    backdrop-filter: none; background: transparent;
  }
  .nav-item { flex: 0; flex-direction: row; justify-content: flex-start; gap: 0.75rem; padding: 0.65rem 0.9rem; border-radius: var(--r-sm); font-size: 0.9rem; letter-spacing: 0; }
  .nav-item[aria-current="page"] { background: color-mix(in srgb, var(--terracotta) 14%, transparent); }
  .nav-brand { padding: 0 0.9rem 1.25rem; }
  .topbar { display: none; }
}
.nav-brand { display: none; }
.nav-foot { display: none; }
@media (min-width: 860px) {
  .nav-brand { display: flex; align-items: center; gap: 0.55rem; }
  .nav-foot {
    display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start;
    margin-top: auto; padding: 1rem 0.9rem 0; border-top: 1px solid var(--paper-edge);
  }
  .nav-foot .profile-switch { flex-direction: column; align-items: stretch; width: 100%; }
}

/* Theme toggle */
.icon-btn { border: 1px solid var(--paper-edge); background: var(--paper); border-radius: 999px; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; color: var(--ink-soft); }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.row { display: flex; gap: 0.75rem; align-items: center; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.disclaimer { font-size: 0.72rem; color: var(--ink-faint); border-top: 1px solid var(--rule); padding-top: 0.8rem; margin-top: 1.2rem; }