/* Healify V2 — tokens + base */

/* ---------- Fonts ---------- */
@font-face { font-family: "ES Rebond Grotesque"; src: url("fonts/ESRebondGrotesque-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "ES Rebond Grotesque"; src: url("fonts/ESRebondGrotesque-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "ES Rebond Grotesque"; src: url("fonts/ESRebondGrotesque-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "ES Rebond Grotesque"; src: url("fonts/ESRebondGrotesque-Semibold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Pro Rounded"; src: url("fonts/SFProRounded-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Pro Rounded"; src: url("fonts/SFProRounded-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Pro Rounded"; src: url("fonts/SFProRounded-Regular.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("fonts/SFProDisplay-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  /* Brand */
  --brand-orange-vibey: #FF6942;
  --brand-gold-sand:    #FDB36B;
  --brand-pale-gold:    #FCE2B8;
  --brand-ink:          #03040D;

  --ink-04: rgba(3,4,13,0.04);
  --ink-06: rgba(3,4,13,0.06);
  --ink-08: rgba(3,4,13,0.08);
  --ink-12: rgba(3,4,13,0.12);
  --ink-16: rgba(3,4,13,0.16);
  --ink-24: rgba(3,4,13,0.24);

  --white: #ffffff;
  --black: #000000;
  --black-primary: #03040D;

  --fg-1: #03040D;
  --fg-2: #57585d;
  --fg-3: #9b97aa;
  --fg-4: #b8b6c4;

  --bg-app: #F4F1ED;          /* warmer cream than #F0F3F5 — V2 tilt */
  --bg-app-deep: #ECE7E0;     /* deeper warm for layered sections */
  --bg-secondary: #f6f6f6;
  --bg-warm-white: #FFFAF8;
  --bg-cream: #FFF6EE;
  --surface: #ffffff;
  --surface-80: rgba(255,255,255,0.8);

  --border: #e2e5e6;
  --border-subtle: #ECE9E4;

  /* Semantic */
  --success: #44C55C;
  --warning: #FFA100;
  --warning-soft: #FF8B6D;
  --error:   #FF4242;
  --info:    #007AFF;

  /* Focus tints */
  --focus-sleep:     #8C80F8;
  --focus-sleep-tint: rgba(140,128,248,0.12);
  --focus-nutrition: #FF6942;
  --focus-nutrition-tint: rgba(255,105,66,0.12);
  --focus-fitness:   #6BD18A;
  --focus-fitness-tint: rgba(107,209,138,0.16);
  --focus-mental:    #00C7BE;
  --focus-mental-tint: rgba(0,199,190,0.14);
  --focus-heart:     #FF4242;
  --focus-heart-tint: rgba(255,66,66,0.10);

  /* Gradients */
  --grad-warm-orange: linear-gradient(95deg, #FF6942 0%, #FDB36B 100%);
  --grad-cta-header:  linear-gradient(180deg, #FDB36B 0%, #FF6942 100%);
  --grad-dark-warm:   linear-gradient(135deg, #03040D 0%, #0D0B12 50%, #1A1018 100%);
  --grad-cream:       linear-gradient(180deg, #FFF6EE 0%, #FFFFFF 60%);
  --grad-user-bubble: linear-gradient(135deg, #1a3a4a 0%, #142e3a 100%);
  --grad-orbital:     conic-gradient(from -90deg, #FF6942 0deg, #FDB36B 90deg, #6BD18A 180deg, #8C80F8 270deg, #FF6942 360deg);

  /* Spacing */
  --space-xxs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 40px;
  --radius-full: 9999px;

  /* Shadows — slightly more atmospheric in V2 */
  --shadow-sm: 0 1px 2px rgba(49,31,105,0.05);
  --shadow-md: 0 4px 12px rgba(49,31,105,0.08);
  --shadow-lg: 0 12px 32px rgba(49,31,105,0.12);
  --shadow-orange: 0 8px 24px rgba(255,105,66,0.32);

  /* Fonts */
  --font-display: "ES Rebond Grotesque", "Inter", system-ui, -apple-system, sans-serif;
  --font-body:    "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    "SF Mono", ui-monospace, Menlo, monospace;

  /* Density (Tweak-controllable) */
  --density-pad: 16px;     /* card interior */
  --density-row: 12px;     /* row gap */

  /* Theme variables (light) */
  --t-bg:        var(--bg-app);
  --t-bg-deep:   var(--bg-app-deep);
  --t-surface:   var(--surface);
  --t-surface-2: #fbfaf7;
  --t-cream:     #FFF6EE;       /* warm accent tint (light) */
  --t-cream-strong: #FEE9D6;    /* slightly stronger warm tint */
  --t-stage:     radial-gradient(circle at 20% 0%, #FFE5D6 0%, #F4F1ED 50%, #ECE7E0 100%);
  --t-fg-1:      var(--fg-1);
  --t-fg-2:      var(--fg-2);
  --t-fg-3:      var(--fg-3);
  --t-border:    var(--border-subtle);
  --t-ink-04:    var(--ink-04);
  --t-ink-08:    var(--ink-08);
  --t-ink-12:    var(--ink-12);
  --t-pill:      #03040D;
  --t-pill-fg:   #ffffff;
  --t-ink-card:  #03040D;       /* high-contrast accent card (dark in light mode) */
  --t-ink-card-fg: #ffffff;
}

/* Dark theme overrides */
html.theme-dark {
  --t-bg:        #0B0A10;
  --t-bg-deep:   #07060B;
  --t-surface:   #15131B;
  --t-surface-2: #1C1A23;
  --t-cream:     #221C24;           /* warm-tinted dark for accent surfaces */
  --t-cream-strong: #2B2229;
  --t-stage:     radial-gradient(circle at 20% 0%, #1A1117 0%, #0B0A10 60%, #07060B 100%);
  --t-fg-1:      #FCFAF7;
  --t-fg-2:      #B7B3BF;
  --t-fg-3:      #7E7A88;
  --t-border:    rgba(255,255,255,0.06);
  --t-ink-04:    rgba(255,255,255,0.04);
  --t-ink-08:    rgba(255,255,255,0.08);
  --t-ink-12:    rgba(255,255,255,0.12);
  --t-pill:      #FCFAF7;
  --t-pill-fg:   #0B0A10;
  --t-ink-card:  #1A1620;       /* slightly lifted warm-dark accent card */
  --t-ink-card-fg: #FFFFFF;
  /* shadows shouldn't be visible on near-black */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg:   0 12px 36px rgba(0,0,0,0.55);
  --shadow-orange: 0 8px 28px rgba(255,105,66,0.45);
  background: #0B0A10;
}
html.theme-dark body { background: #0B0A10; }

html, body {
  margin: 0;
  background: var(--t-bg);
  font-family: var(--font-body);
  color: var(--t-fg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

button {
  font-family: inherit;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

/* ---------- Type utilities ---------- */
.h-display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
.h-display-l { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.025em; }
.h-label {
  font-family: var(--font-body); font-weight: 500; font-size: 11px;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--t-fg-3);
}

/* Focus ring suppression for prototype taps */
button:focus { outline: none; }

/* Scrollbars hidden in webkit */
::-webkit-scrollbar { display: none; }
.scroll-y { overflow-y: auto; scrollbar-width: none; }

/* Stage */
.stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 20px 80px;
  background: var(--t-stage);
}

/* ===========================================
   Animation utilities
   =========================================== */

@keyframes pulse-soft {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}
@keyframes ring-spin {
  to { transform: rotate(360deg); }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-up-lg {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes pop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes draw-ring {
  to { stroke-dashoffset: 0; }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
@keyframes orb-pulse {
  0%, 100% { transform: scale(1); filter: blur(0); }
  50%      { transform: scale(1.05); filter: blur(0); }
}
@keyframes voice-wave {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1); }
}
@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* Utility classes */
.fade-up     { animation: fade-up     360ms cubic-bezier(.2,.6,.2,1) both; }
.fade-up-lg  { animation: fade-up-lg  460ms cubic-bezier(.2,.6,.2,1) both; }
.fade-in     { animation: fade-in     300ms ease-out both; }
.scale-in    { animation: scale-in    320ms cubic-bezier(.2,.6,.2,1) both; }
.slide-up    { animation: slide-up    360ms cubic-bezier(.2,.6,.2,1) both; }
.pop         { animation: pop         340ms cubic-bezier(.4,1.4,.5,1) both; }
.breathe     { animation: breathe      4s ease-in-out infinite; }
.float-soft  { animation: float-soft   3s ease-in-out infinite; }

/* Stagger children (use inline delays for now since :nth-child can't span screens) */
.stagger > * { animation: fade-up 380ms cubic-bezier(.2,.6,.2,1) both; }
.stagger > *:nth-child(1) { animation-delay: 30ms; }
.stagger > *:nth-child(2) { animation-delay: 80ms; }
.stagger > *:nth-child(3) { animation-delay: 130ms; }
.stagger > *:nth-child(4) { animation-delay: 180ms; }
.stagger > *:nth-child(5) { animation-delay: 230ms; }
.stagger > *:nth-child(6) { animation-delay: 280ms; }
.stagger > *:nth-child(7) { animation-delay: 330ms; }
.stagger > *:nth-child(8) { animation-delay: 380ms; }

/* Screen-transition wrapper */
.screen-in {
  animation: fade-up 360ms cubic-bezier(.2,.6,.2,1) both;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Interactive press-down */
button { transition: transform 120ms ease-out, opacity 120ms ease-out; }
button:active { transform: scale(0.97); }