/* =================================================================
 * TensorFit Design Tokens
 * - Theme axis: [data-theme="dark"|"light"]
 * - Identity axis: [data-palette="male"|"female"]
 * Fonts: Satoshi (Fontshare CDN) + Space Grotesk (Google Fonts), loaded
 * via <link> tags in index.html.
 * =================================================================*/

:root {
  /* ---------- Type ---------- */
  --ff-display: 'Satoshi', system-ui, -apple-system, sans-serif;
  --ff-body:    'Satoshi', system-ui, -apple-system, sans-serif;
  --ff-mono:    'Space Grotesk', ui-monospace, monospace;

  --fs-display-xl: 48px;  --lh-display-xl: 1.04;  --ls-display-xl: -1.6px;
  --fs-display-lg: 38px;  --lh-display-lg: 1.08;  --ls-display-lg: -1.2px;
  --fs-display-md: 28px;  --lh-display-md: 1.14;  --ls-display-md: -0.6px;
  --fs-h1:         22px;  --lh-h1:         1.2;   --ls-h1:         -0.2px;
  --fs-h2:         18px;  --lh-h2:         1.28;
  --fs-h3:         16px;  --lh-h3:         1.3;
  --fs-body:       14px;  --lh-body:       1.55;
  --fs-small:      13px;  --lh-small:      1.5;
  --fs-label:      11px;  --lh-label:      1.2;   --ls-label: 0.08em;

  /* ---------- Radii ---------- */
  --radius-sm:   12px;
  --radius-md:   16px;
  --radius-lg:   22px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-full: 9999px;

  /* ---------- Spacing ---------- */
  --s-1:  4px;  --s-2:  8px;  --s-3: 12px;
  --s-4: 16px;  --s-5: 20px;  --s-6: 24px;
  --s-7: 32px;  --s-8: 40px;  --s-9: 48px; --s-10: 64px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast:   120ms;
  --dur-med:    220ms;
  --dur-slow:   420ms;
  --dur-flow:    26s;
}

/* =====================================================================
 * DARK THEME — foundation
 * =====================================================================*/
[data-theme="dark"] {
  --bg-deepest:    #070510;
  --bg-base:       #0A0815;
  --bg-elev-1:     #15101C;         /* card glass fill (opaque) */
  --bg-elev-2:     #1D1628;
  --bg-glass:      rgba(21, 16, 28, 0.55);
  --bg-glass-top:  rgba(255, 255, 255, 0.04);

  --fg-strong:    #FFFFFF;
  --fg-default:   #E6E2F0;
  --fg-muted:     #A198B4;
  --fg-subtle:    #6E6380;

  --border-ghost: rgba(255, 255, 255, 0.08);
  --border-soft:  rgba(255, 255, 255, 0.04);

  --shadow-card:   0 20px 50px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  --shadow-float:  0 28px 70px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  --shadow-pressed: 0 6px 16px rgba(0, 0, 0, 0.55);
}

[data-theme="light"] {
  --bg-deepest:    #E9ECF2;
  --bg-base:       #F4F6FA;
  --bg-elev-1:     #FFFFFF;
  --bg-elev-2:     #F8FAFD;
  --bg-glass:      rgba(255, 255, 255, 0.72);
  --bg-glass-top:  rgba(255, 255, 255, 0.9);

  --fg-strong:    #0B0514;
  --fg-default:   #2A2238;
  --fg-muted:     #6D6581;
  --fg-subtle:    #A29DB2;

  --border-ghost: rgba(20, 20, 40, 0.09);
  --border-soft:  rgba(20, 20, 40, 0.05);

  --shadow-card:   0 14px 32px rgba(30, 40, 80, 0.08), inset 0 1px 0 rgba(255,255,255,0.8);
  --shadow-float:  0 24px 50px rgba(30, 40, 80, 0.12), inset 0 1px 0 rgba(255,255,255,0.9);
  --shadow-pressed: 0 4px 10px rgba(30, 40, 80, 0.08);
}

/* =====================================================================
 * IDENTITY PALETTE — male (cyan / orange)
 * =====================================================================*/
[data-palette="male"] {
  --p-primary:        #00E5FF;
  --p-primary-soft:   rgba(0, 229, 255, 0.18);
  --p-primary-glow:   rgba(0, 229, 255, 0.45);
  --p-primary-on:     #03141A;

  --p-accent:         #F97316;  /* orange — used on "Save", Builder active */
  --p-accent-soft:    rgba(249, 115, 22, 0.16);
  --p-accent-on:      #1C0A00;

  --p-ai:             #8B5CF6;  /* violet — Coach / AI features */
  --p-ai-soft:        rgba(139, 92, 246, 0.20);

  --p-success:        #22D3B7;
  --p-warning:        #F59E0B;
  --p-danger:         #F43F5E;

  /* Horizon — the primary male gradient. base → cyan → violet. */
  --flow-a: #0A0815;
  --flow-b: #00D4FF;
  --flow-c: #8B5CF6;
}

/* IDENTITY PALETTE — female (pink → cyan) */
[data-palette="female"] {
  --p-primary:        #EC4899;
  --p-primary-soft:   rgba(236, 72, 153, 0.18);
  --p-primary-glow:   rgba(236, 72, 153, 0.45);
  --p-primary-on:     #1A050E;

  --p-accent:         #22D3EE;           /* cyan — the counterpart to pink */
  --p-accent-soft:    rgba(34, 211, 238, 0.18);
  --p-accent-on:      #031418;

  --p-ai:             #22D3EE;           /* AI reads as cyan, matches accent */
  --p-ai-soft:        rgba(34, 211, 238, 0.18);

  --p-success:        #22D3B7;
  --p-warning:        #FCA5A5;
  --p-danger:         #F43F5E;

  --flow-a: #EC4899;   /* pink */
  --flow-b: #C084FC;   /* soft violet bridge */
  --flow-c: #22D3EE;   /* cyan */
}

/* =====================================================================
 * Semantic type classes (use in any HTML)
 * =====================================================================*/
.t-display-xl { font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--ls-display-xl); }
.t-display-lg { font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-display-lg); line-height: var(--lh-display-lg); letter-spacing: var(--ls-display-lg); }
.t-display-md { font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-display-md); line-height: var(--lh-display-md); letter-spacing: var(--ls-display-md); }
.t-h1  { font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
.t-h2  { font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-h2); }
.t-h3  { font-family: var(--ff-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-h3); }
.t-body { font-family: var(--ff-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); }
.t-body-strong { font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-body); line-height: var(--lh-body); }
.t-small { font-family: var(--ff-body); font-weight: 400; font-size: var(--fs-small); line-height: var(--lh-small); }
.t-label { font-family: var(--ff-mono); font-weight: 600; font-size: var(--fs-label); line-height: var(--lh-label); letter-spacing: var(--ls-label); }
.t-mono  { font-family: var(--ff-mono); font-weight: 500; }

/* =====================================================================
 * Primitives
 * =====================================================================*/
.glass {
  background: var(--bg-glass);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
          backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--border-ghost);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-lg);
}

.btn-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px;
  border-radius: var(--radius-full);
  font-family: var(--ff-display); font-weight: 700; font-size: 14px;
  letter-spacing: 0.02em;
  border: 1px solid var(--border-ghost);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
.btn-pill:active { transform: scale(0.97); filter: brightness(0.94); }

.btn-primary {
  background: linear-gradient(180deg, var(--p-primary) 0%, color-mix(in oklab, var(--p-primary) 80%, black) 100%);
  color: var(--p-primary-on);
  border-color: transparent;
  box-shadow: 0 10px 30px var(--p-primary-glow), inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn-accent {
  background: linear-gradient(180deg, var(--p-accent) 0%, color-mix(in oklab, var(--p-accent) 80%, black) 100%);
  color: var(--p-accent-on);
  border-color: transparent;
  box-shadow: 0 10px 30px color-mix(in oklab, var(--p-accent) 45%, transparent), inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn-ghost {
  background: var(--bg-glass);
  color: var(--fg-strong);
  backdrop-filter: blur(14px);
}