/* ============================================================
   Rebel Health — THE design system  (Fleet 7 convergence)
   Linked in every member page <head>, BEFORE each page's own
   <style>. This file owns the tokens, the light/dark themes,
   and the shared component classes (card / button / empty /
   toast / chart). Pages import it; pages do NOT redefine tokens.
   Blue Flame identity. Data is the hero. One system, everywhere.
   ============================================================ */

/* ============================================================
   1. TOKENS  —  dark is the default identity; light is a
   first-class citizen (redefined both directions below).
   Accent (flame) and semantic colors (good/warn/bad) are
   theme-CONSTANT by design — only the neutrals repaint.
   ============================================================ */
:root{
  color-scheme: dark;

  /* accent — the single point of boldness (constant across themes) */
  --flame:      #2060ff;
  --flame-2:    #6a8dff;
  --flame-ink:  #ffffff;             /* text on a flame fill */

  /* neutrals — these repaint per theme */
  --bg:      #07090d;
  --bg-elev: #0a0e14;                /* inputs / recessed wells */
  --card:    #10141b;
  --card2:   #0c1017;
  --card-hi: #12161f;                /* card elevation gradient top */
  --card-lo: #0d1119;                /* card elevation gradient bottom */
  --line:    #1e2530;
  --txt:     #eef2f7;
  --txt2:    #c6cede;                /* secondary body */
  --txt-hi:  #b9c6da;                /* display-gradient lower stop */
  --mut:     #8b96a5;
  --dim:     #5b6675;
  --dim2:    #3d4654;

  /* semantic (constant intent; nudged for contrast in light) */
  --good:   #35d07f;
  --warn:   #f5a623;
  --bad:    #ff5a7a;
  --violet: #a78bfa;

  /* accent-tinted + semantic text/surfaces (these repaint per theme) */
  --flame-txt:  #9db8ff;             /* accent-tinted body/link/eyebrow text */
  --flame-chip: #1a2231;             /* accent-tinted chip / avatar surface */
  --good-txt:   #bff0d5;             /* readable green body text on green tint */
  --good-mut:   #7fb89a;             /* muted green caption on green tint */
  --warn-txt:   #e6c98f;             /* amber body text on amber tint */

  /* accent button gradient + ink-on-amber (theme-CONSTANT by design) */
  --flame-hi:   #2f6bff;             /* primary button gradient top */
  --flame-lo:   #1a54ec;             /* primary button gradient bottom */
  --warn-ink:   #1a1204;             /* dark ink on an amber fill */

  /* derived accent washes */
  --blue-soft: rgba(32,96,255,.12);
  --blue-line: #21355e;
  --flame-wash: rgba(32,96,255,.09);

  /* motion */
  --ease:        cubic-bezier(.22, 1, .36, 1);
  --ease-out:    cubic-bezier(.16, 1, .30, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  /* depth */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 14px 34px rgba(0,0,0,.42);
  --shadow-lg: 0 34px 90px rgba(0,0,0,.55);
  --flame-glow: 0 0 0 1px rgba(32,96,255,.16), 0 16px 46px rgba(32,96,255,.20);
  --ring: 0 0 0 3px rgba(32,96,255,.35);

  /* radius scale */
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* spacing scale (4pt base) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 26px; --sp-7: 34px; --sp-8: 48px;

  /* type scale — data is the hero */
  --fs-eyebrow: 10.5px;              /* uppercase micro-label */
  --fs-micro:   11px;
  --fs-small:   12.5px;
  --fs-body:    14px;
  --fs-lead:    16px;
  --fs-h3:      19px;
  --fs-h2:      26px;
  --fs-h1:      33px;
  --fs-display: 46px;                /* the number that matters */

  /* safe-area insets (viewport-fit=cover) */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}

/* LIGHT — applied when the OS asks for it (unless a page pins data-theme) */
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    color-scheme: light;
    --bg:      #f4f6fb;
    --bg-elev: #eef1f7;
    --card:    #ffffff;
    --card2:   #eef1f7;
    --card-hi: #ffffff;
    --card-lo: #f6f8fc;
    --line:    #dde3ee;
    --txt:     #0f1720;
    --txt2:    #2a3542;
    --txt-hi:  #3a4656;
    --mut:     #5a6675;
    --dim:     #8a97a8;
    --dim2:    #a7b1c0;
    --good:    #1f9d5e;
    --warn:    #b5760a;
    --bad:     #d63a5a;
    --violet:  #7c5cd6;
    --flame-txt:  #2a53cc;
    --flame-chip: #e4eaf6;
    --good-txt:   #157a48;
    --good-mut:   #3f8a68;
    --warn-txt:   #8a6d00;
    --blue-soft: rgba(32,96,255,.10);
    --blue-line: #c3d0f0;
    --flame-wash: rgba(32,96,255,.07);
    --shadow-sm: 0 1px 2px rgba(16,28,54,.10);
    --shadow-md: 0 12px 30px rgba(16,28,54,.12);
    --shadow-lg: 0 28px 70px rgba(16,28,54,.16);
  }
}

/* explicit overrides win in BOTH directions regardless of OS */
:root[data-theme="dark"]{ color-scheme: dark; }

:root[data-theme="light"]{
  color-scheme: light;
  --bg:      #f4f6fb;
  --bg-elev: #eef1f7;
  --card:    #ffffff;
  --card2:   #eef1f7;
  --card-hi: #ffffff;
  --card-lo: #f6f8fc;
  --line:    #dde3ee;
  --txt:     #0f1720;
  --txt2:    #2a3542;
  --txt-hi:  #3a4656;
  --mut:     #5a6675;
  --dim:     #8a97a8;
  --dim2:    #a7b1c0;
  --good:    #1f9d5e;
  --warn:    #b5760a;
  --bad:     #d63a5a;
  --violet:  #7c5cd6;
  --flame-txt:  #2a53cc;
  --flame-chip: #e4eaf6;
  --good-txt:   #157a48;
  --good-mut:   #3f8a68;
  --warn-txt:   #8a6d00;
  --blue-soft: rgba(32,96,255,.10);
  --blue-line: #c3d0f0;
  --flame-wash: rgba(32,96,255,.07);
  --shadow-sm: 0 1px 2px rgba(16,28,54,.10);
  --shadow-md: 0 12px 30px rgba(16,28,54,.12);
  --shadow-lg: 0 28px 70px rgba(16,28,54,.16);
}

/* ── rendering polish ──────────────────────────────────── */
html{ scroll-behavior:smooth; }
body{ text-rendering:optimizeLegibility; -moz-osx-font-smoothing:grayscale; letter-spacing:-.004em; }

::selection{ background:rgba(32,96,255,.32); color:#fff; }

/* ── refined scrollbars ────────────────────────────────── */
*{ scrollbar-width:thin; scrollbar-color:#26344c transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(#20304a,#141d2c);
  border-radius:20px; border:2px solid transparent; background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{ background:#2c3a52; background-clip:padding-box; }

/* ── keyboard focus ring (does not touch :focus styles pages set) ── */
:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:9px; }

/* ── second ambient flame glow for depth (pages ship only one) ── */
body::after{
  content:""; position:fixed; left:-240px; bottom:-340px;
  width:780px; height:780px; border-radius:50%;
  pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(32,96,255,.065) 0%, transparent 62%);
  animation: rhDrift 24s var(--ease-in-out) infinite alternate;
}

/* slow, barely-there drift on the ambient glows → the page breathes */
.glow  { animation: rhDrift  22s var(--ease-in-out) infinite alternate; }
.glow2 { animation: rhDrift2 26s var(--ease-in-out) infinite alternate; }

/* ── keyframes ─────────────────────────────────────────── */
@keyframes rhFadeUp { from{ opacity:0; transform:translateY(15px); } to{ opacity:1; transform:translateY(0); } }
@keyframes rhFadeIn { from{ opacity:0; } to{ opacity:1; } }
@keyframes rhPop    { from{ opacity:0; transform:scale(.82); } to{ opacity:1; transform:scale(1); } }
@keyframes rhWipe   { from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes rhSheen  { 0%{ transform:translateX(-160%) skewX(-14deg); } 60%,100%{ transform:translateX(340%) skewX(-14deg); } }
@keyframes rhDrift  { from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-34px,30px,0); } }
@keyframes rhDrift2 { from{ transform:translate3d(0,0,0); } to{ transform:translate3d(30px,-26px,0); } }

/* ============================================================
   ENTRANCE — content settles in on load.
   fill-mode BACKWARDS on purpose: after the animation ends the
   element reverts to its normal styles, so page :hover transforms
   keep working (a persisted final transform would break them).
   ============================================================ */
.card, .stat, .pillar, .device-card, .plan-card, .addon-card, .member,
.goal, .lab, .accordion-item, .idcard, .progwrap, .labcard, .cta,
.metric-card, .day, .slot, .persona, .refer-hero, .card-display, .share-actions,
.rh-card{
  animation: rhFadeUp .6s var(--ease-out) backwards;
}

/* hero type drifts up a touch later */
.hello, .title, .page-heading, .refer-hero h1, h2{ animation: rhFadeUp .66s var(--ease-out) backwards; }
.subhello, .sub, .story, .page-subheading{ animation: rhFadeUp .66s .06s var(--ease-out) backwards; }

/* staggered reveal within grids (per-parent nth-child) */
.stat:nth-child(2), .device-card:nth-child(2), .plan-card:nth-child(2),
.addon-card:nth-child(2), .member:nth-child(2), .goal:nth-child(2),
.lab:nth-child(2), .metric-card:nth-child(2), .persona:nth-child(2),
.day:nth-child(2), .slot:nth-child(2){ animation-delay:.05s; }

.stat:nth-child(3), .device-card:nth-child(3), .plan-card:nth-child(3),
.addon-card:nth-child(3), .member:nth-child(3), .goal:nth-child(3),
.lab:nth-child(3), .metric-card:nth-child(3), .persona:nth-child(3),
.day:nth-child(3), .slot:nth-child(3){ animation-delay:.10s; }

.stat:nth-child(4), .addon-card:nth-child(4), .member:nth-child(4),
.goal:nth-child(4), .lab:nth-child(4), .metric-card:nth-child(4),
.persona:nth-child(4), .day:nth-child(4), .slot:nth-child(4){ animation-delay:.15s; }

.member:nth-child(5), .goal:nth-child(5), .lab:nth-child(5),
.persona:nth-child(5), .day:nth-child(5), .slot:nth-child(5){ animation-delay:.20s; }
.member:nth-child(6), .persona:nth-child(6), .slot:nth-child(6){ animation-delay:.25s; }
.slot:nth-child(7){ animation-delay:.30s; } .slot:nth-child(8){ animation-delay:.34s; }
.accordion-item:nth-child(even){ animation-delay:.06s; }

/* ── chart draw: reveal the injected SVG paths left-to-right ── */
svg.chart path, svg.rh-chart path{ animation: rhWipe 1.05s .12s var(--ease-out) both; }
svg.chart circle, svg.rh-chart circle{ animation: rhPop .5s .9s var(--ease-out) backwards; }
svg.spark path{ animation: rhWipe .9s .15s var(--ease-out) both; }
svg.spark circle{ animation: rhPop .45s .8s var(--ease-out) backwards; }

/* ============================================================
   MICRO-INTERACTIONS
   ============================================================ */
button, .btn, .btn-line, .vbtn, .mbtn, .plan-btn, .addon-btn,
.connect-btn, .share-btn, .accordion-trigger, .resetbtn, .day, .slot,
.rh-btn{
  transition: transform .14s var(--ease), box-shadow .2s var(--ease),
              background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
button:active:not(:disabled), .btn:active, .vbtn:active, .mbtn:active,
.connect-btn:active, .day:active, .slot:active, .rh-btn:active:not(:disabled){ transform: translateY(1px) scale(.99); }

/* sweep of light across primary CTAs on hover */
.primary, .btn, .plan-btn, .addon-btn, .share-btn, button#send, button#bookBtn, button#go,
.rh-btn--primary{
  position:relative; overflow:hidden; isolation:isolate;
}
.primary::after, .btn::after, .plan-btn.primary::after, .addon-btn::after,
.share-btn::after, button#send::after, button#bookBtn::after, button#go::after,
.rh-btn--primary::after{
  content:""; position:absolute; top:0; left:0; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform:translateX(-160%) skewX(-14deg); pointer-events:none; z-index:1;
}
.primary:hover::after, .btn:hover::after, .plan-btn.primary:hover::after,
.addon-btn:hover::after, .share-btn:hover::after,
button#send:hover::after, button#bookBtn:hover::after, button#go:hover::after,
.rh-btn--primary:hover::after{
  animation: rhSheen .8s var(--ease-out);
}

/* tabular figures wherever big numbers live → they stop wobbling */
.stat .v, .chartmeta .big, .metric-card .v, .idcard .amt, .plan .price .amt,
.plan-price, .addon-card-price, .progmeta .v, .ring .pct, .tnum, [data-num]{
  font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1, "cv01" 1;
}

/* ============================================================
   2. SHARED COMPONENTS  —  the ONE of each. Additive class
   names (rh-*) so existing page markup is undisturbed; new
   markup and converged pages render through these.
   ============================================================ */

/* eyebrow / micro-label */
.rh-eyebrow{
  text-transform:uppercase; letter-spacing:.16em; font-size:var(--fs-eyebrow);
  font-weight:800; color:var(--mut);
}

/* ONE card */
.rh-card{
  background:
    radial-gradient(120% 100% at 50% -8%, var(--flame-wash), transparent 58%),
    linear-gradient(180deg, var(--card-hi) 0%, var(--card-lo) 100%);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:var(--sp-6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--shadow-md);
  position:relative;
}
.rh-card--tap{ cursor:pointer; transition:transform .12s var(--ease), border-color .15s, box-shadow .2s; }
.rh-card--tap:hover{ transform:translateY(-2px); border-color:var(--flame); box-shadow:var(--shadow-lg); }

/* ONE button system: primary / secondary / ghost */
.rh-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 18px; border-radius:var(--r-sm);
  font-family:inherit; font-size:var(--fs-body); font-weight:800; letter-spacing:.01em;
  cursor:pointer; border:1px solid transparent; text-decoration:none; white-space:nowrap;
}
.rh-btn:disabled{ opacity:.55; cursor:default; }
.rh-btn--primary{
  background:linear-gradient(180deg,#2f6bff,#1a54ec); color:var(--flame-ink);
  box-shadow:0 8px 30px rgba(32,96,255,.35);
}
.rh-btn--primary:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 12px 36px rgba(32,96,255,.45); }
.rh-btn--secondary{
  background:transparent; color:var(--txt); border-color:var(--line);
}
.rh-btn--secondary:hover:not(:disabled){ border-color:var(--flame); color:var(--txt); }
.rh-btn--ghost{
  background:transparent; color:var(--mut); border-color:transparent; min-height:auto; padding:8px 12px;
}
.rh-btn--ghost:hover:not(:disabled){ color:var(--txt); }

/* ONE empty state — branded + directive */
.rh-empty{
  text-align:center; padding:var(--sp-8) var(--sp-5);
  border:1px dashed var(--line); border-radius:var(--r-lg);
  background:var(--card2); color:var(--mut);
}
.rh-empty .rh-empty-icon{
  width:46px; height:46px; margin:0 auto var(--sp-4); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--blue-soft); color:var(--flame); font-size:20px;
}
.rh-empty h3{ color:var(--txt); font-size:var(--fs-lead); font-weight:800; margin-bottom:6px; letter-spacing:-.01em; }
.rh-empty p{ font-size:var(--fs-small); line-height:1.5; max-width:34ch; margin:0 auto var(--sp-4); }

/* ONE status pill / chip */
.rh-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:var(--r-pill);
  font-size:var(--fs-micro); font-weight:800; letter-spacing:.04em;
  border:1px solid var(--line); background:var(--card2); color:var(--mut);
}
.rh-pill--good{ color:var(--good); border-color:rgba(53,208,127,.3); background:rgba(53,208,127,.08); }
.rh-pill--warn{ color:var(--warn); border-color:rgba(245,166,35,.3); background:rgba(245,166,35,.08); }
.rh-pill--live{ color:var(--flame); border-color:rgba(32,96,255,.35); background:var(--blue-soft); }

/* ONE toast / confirmation */
.rh-toast{
  position:fixed; left:50%; bottom:calc(var(--safe-b) + 84px); transform:translateX(-50%) translateY(12px);
  z-index:200; max-width:min(420px,92vw);
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:var(--r-md);
  background:var(--card); border:1px solid var(--line); color:var(--txt);
  font-size:var(--fs-small); font-weight:700; box-shadow:var(--shadow-lg);
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.rh-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.rh-toast::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--good); flex:0 0 auto; }
.rh-toast--err::before{ background:var(--bad); }

/* ── reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-delay:0ms !important;
    animation-iteration-count:1 !important; transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}
