/* ============================================================================
 * family.css: the Saadhav design family (DWIJ-98), loaded LAST.
 *
 * Dark = "Galaxy" (default): Midnight Slate, Smoky Indigo glass, Muted Geru
 * accent, Aged Brass highlight, Moonlit Ivory text, a starfield behind
 * (core/sky.js). Light = "Sand" ([data-theme="light"] on <html>): Sand Canvas,
 * Porcelain glass, Brass, Ink Plum, a plain warm wash.
 *
 * style.css and funnel-ui.css read the --f-* variables below (rewritten by
 * scripts/family_recolor.py); the legacy token names are remapped here, so a
 * rule that still says var(--color-primary) gets the family colour too.
 * Prototype: frontend/_tmp/design-family.html on the dev box.
 * ========================================================================== */

:root{
  --f-bg:#0D1119;            --f-bg-rgb:13,17,25;
  --f-surface-rgb:23,26,39;  /* Smoky Indigo */
  --f-tile-rgb:36,35,52;     /* Ash Violet */
  --f-accent:#B96848;        --f-accent-rgb:185,104,72;   /* Muted Geru */
  --f-accent-hi:#C87652;     --f-accent-deep:#8E4A30;
  --f-hi:#C5AC78;            --f-hi-rgb:197,172,120;      /* Aged Brass */
  --f-text:#E4E0EA;          --f-text-rgb:228,224,234;    /* Moonlit Ivory */
  --f-text-2:rgba(228,224,234,.70);
  --f-text-3:rgba(228,224,234,.50);
  --f-line-rgb:228,224,234;
  --f-gold:#D4C5A0;          --f-gold-rgb:212,197,160;
  --f-gold-2:#E8DCBF;        --f-gold2-rgb:232,220,191;
  --f-edge:rgba(228,224,234,.09);
  --f-bevel:rgba(255,255,255,.07);
  --f-shadow:0 10px 30px rgba(0,0,0,.35);
  --f-glass-a:.58;           /* Frost */
  --f-blur:18px;             --f-sat:150%;
  --f-cta:linear-gradient(180deg,var(--f-accent-hi),var(--f-accent-deep));
  --f-cta-ink:#FFF6EE;
  --f-cta-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 16px rgba(185,104,72,.40);
  --f-gutter:16px;
  --f-radius:20px;

  /* ---- legacy tokens, remapped to the family ---- */
  --color-primary:var(--f-accent);
  --color-primary-light:var(--f-hi);
  --color-primary-dark:var(--f-accent-deep);
  --color-primary-darker:#7A3E28;
  --color-primary-deep:#6A3522;
  --color-secondary:var(--f-hi);
  --color-secondary-light:var(--f-gold-2);
  --color-secondary-muted:var(--f-hi);
  --color-gold:var(--f-gold);
  --color-gold-light:var(--f-gold-2);
  --color-gold-pale:var(--f-gold-2);
  --color-bg-primary:var(--f-bg);
  --color-bg-secondary:rgb(var(--f-surface-rgb));
  --color-bg-tertiary:rgb(var(--f-tile-rgb));
  --color-bg-elevated:rgb(var(--f-surface-rgb));
  --color-bg-card:rgba(var(--f-surface-rgb),.62);
  --color-bg-input:rgba(var(--f-surface-rgb),.70);
  --color-bg-hover:rgb(var(--f-tile-rgb));
  --color-bg-hover-light:rgba(var(--f-tile-rgb),.8);
  --color-bg-dark-1:var(--f-bg);
  --color-bg-dark-2:rgb(var(--f-surface-rgb));
  --color-bg-dark-3:rgb(var(--f-tile-rgb));
  --color-text-primary:var(--f-text);
  --color-text-secondary:var(--f-text-2);
  --color-text-muted:var(--f-text-2);
  --color-text-dim:var(--f-text-3);
  --color-text-body:var(--f-text);
  --color-text-bright:var(--f-text);
  --color-text-soft:var(--f-text);
  --color-text-light:var(--f-text-2);
  --glass-bg:rgba(var(--f-line-rgb),.04);
  --glass-border:var(--f-edge);
  --glass-border-light:rgba(var(--f-line-rgb),.06);
  --glass-border-medium:rgba(var(--f-line-rgb),.09);
  --glass-border-strong:rgba(var(--f-line-rgb),.16);
  --bg-deep:var(--f-bg);
  --bg-mid:var(--f-bg);
  --bg-night:var(--f-bg);
  --warm-100:var(--f-gold-2);
  --warm-200:var(--f-gold-2);
  --warm-300:var(--f-gold);
  --warm-400:var(--f-hi);
  --warm-glow:rgba(var(--f-hi-rgb),.12);
  --violet-100:var(--f-gold-2);
  --violet-200:var(--f-hi);
  --violet-300:var(--f-accent-hi);
  --violet-400:#A65A3C;
  --violet-500:var(--f-accent-deep);
  --text-ethereal-primary:var(--f-text);
  --text-ethereal-secondary:var(--f-text-2);
  --text-ethereal-tertiary:var(--f-text-3);
  color-scheme:dark;
}

:root[data-theme="light"]{
  --f-bg:#F5EEE2;            --f-bg-rgb:245,238,226;
  --f-surface-rgb:255,251,247;
  --f-tile-rgb:252,245,236;
  --f-accent:#B05F3E;        --f-accent-rgb:176,95,62;
  --f-accent-hi:#C06A45;     --f-accent-deep:#8E4A30;
  --f-hi:#A77C48;            --f-hi-rgb:167,124,72;
  --f-text:#292238;          --f-text-rgb:41,34,56;
  --f-text-2:rgba(41,34,56,.72);
  --f-text-3:rgba(41,34,56,.60);   /* muted text on sand: a touch darker than dark mode so it stays legible */
  --f-line-rgb:167,124,72;
  --f-gold:#A77C48;          --f-gold-rgb:167,124,72;
  --f-gold-2:#292238;        --f-gold2-rgb:41,34,56;     /* warm headings/values read as ink in Sand */
  --f-edge:rgba(167,124,72,.20);
  --f-bevel:rgba(255,255,255,.85);
  --f-shadow:0 10px 26px rgba(120,84,46,.14);
  --f-glass-a:.55;
  --f-cta-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 16px rgba(176,95,62,.30);
  --color-primary-darker:#7A3E28;
  color-scheme:light;
}

/* ============================ PAGE BACKGROUND ============================ */
html{background:var(--f-bg)}
/* html carries the colour; body stays transparent, because a non-positioned
   body's background paints OVER negative-z layers (the starfield, the wash). */
body{
  background:transparent !important;
  color:var(--f-text);
}
body::before{                       /* the faint top light both themes share */
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(120% 70% at 50% 0%, #161b2b 0%, var(--f-bg) 60%);
}
:root[data-theme="light"] body::before{
  background:
    radial-gradient(60% 40% at 0% 20%, rgba(236,201,162,.55), transparent 70%),
    radial-gradient(55% 40% at 100% 55%, rgba(240,215,184,.70), transparent 70%),
    radial-gradient(50% 35% at 10% 95%, rgba(227,185,143,.40), transparent 70%),
    radial-gradient(120% 70% at 50% 0%, #fbf6ee 0%, var(--f-bg) 65%);
}
/* starfield stage (core/sky.js), dark only */
.f-sky{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.f-sky > *{position:absolute;left:0;right:0;top:-20%;bottom:-20%;will-change:transform}
.f-sky .f-neb i{position:absolute;border-radius:50%;filter:blur(60px)}
.f-sky canvas{width:100%;height:100%;display:block}
:root[data-theme="light"] .f-sky{display:none}

/* ============================ TYPE ============================ */
/* One family voice: Lora for headings, Outfit for everything else (Raleway retired). */
:root{--font-body:var(--font-ui)}
body{font-family:var(--font-ui)}

/* ============================ BUTTONS ============================ */
.btn-primary,
.btn-primary:hover:not(:disabled){
  background:var(--f-cta);color:var(--f-cta-ink);border:0;
  box-shadow:var(--f-cta-shadow);letter-spacing:.02em;
}
.btn-primary:disabled{opacity:.45;box-shadow:none}
/* ~30 context variants (.welcome-page .btn-primary, .coach-intro-cta-wrap ...)
   each set their own text colour; their backgrounds already take the geru
   tokens, so only the ink is pinned here, once. */
.btn-primary,.numo-cta{color:var(--f-cta-ink) !important}
.numo-cta{background:var(--f-cta);border:0;box-shadow:var(--f-cta-shadow);letter-spacing:.02em}
.numo-cta:disabled{color:var(--f-text-3) !important}

/* ============================ GLASS TIERS ============================ */
/* info card = solid glass; clickable tile = tinted glass + soft glow;
   active = bright edge + gentle lift (see discover-redesign.css for tiles). */
.f-card{
  border-radius:var(--f-radius);background:rgba(var(--f-surface-rgb),var(--f-glass-a));
  -webkit-backdrop-filter:blur(var(--f-blur)) saturate(var(--f-sat));backdrop-filter:blur(var(--f-blur)) saturate(var(--f-sat));
  border:1px solid var(--f-edge);box-shadow:inset 0 1px 0 var(--f-bevel),var(--f-shadow);
}

/* ============================ SUB-APP HEADER ============================ */
/* One back bar for every overlay + the bundle walk: the arrow's stroke sits on
   the 16px gutter and is centred on the title's x-height. */
.subapp-header{
  display:flex;align-items:center;gap:8px;
  padding:calc(12px + env(safe-area-inset-top)) var(--f-gutter) 12px;
  background:rgba(var(--f-surface-rgb),.88);
  -webkit-backdrop-filter:blur(var(--f-blur)) saturate(var(--f-sat));backdrop-filter:blur(var(--f-blur)) saturate(var(--f-sat));
  border-bottom:1px solid var(--f-edge);
}
.subapp-back{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;margin-left:-7.5px;padding:0;border:0;background:none;   /* arrow ink lands on the 16px gutter (measured) */
  color:var(--f-text);font-size:22px;line-height:1;cursor:pointer;flex:none;
}
.subapp-title{font-family:var(--font-display);font-weight:500;font-size:21px;color:var(--f-text);margin:0;line-height:1.2}
.subapp-sub{color:var(--f-text-3)}
.subapp-overlay{background:var(--f-bg)}

/* full-screen overlays are opaque, so they carry a still copy of the starfield */
.subapp-overlay{background:var(--f-stars-img,none) center top / 100% auto no-repeat,var(--f-bg)}
:root[data-theme="light"] .subapp-overlay{background:var(--f-bg)}

/* ============================ PAY SHEET ============================ */
.co-sheet{background:linear-gradient(180deg,rgb(var(--f-surface-rgb)) 0%,var(--f-bg) 70%)}
.co-cta{color:var(--f-cta-ink);background:var(--f-cta);box-shadow:var(--f-cta-shadow)}

/* ============================ PROFILE (light legibility) ============================ */
:root[data-theme="light"] .profile-text-btn{color:var(--f-accent)}
:root[data-theme="light"] .profile-danger-btn{color:#A3392F;background:rgba(176,57,47,.08);border-color:rgba(176,57,47,.30)}

/* ============================ ANTI-SHOP readiness chips (light legibility) ============================ */
:root[data-theme="light"] .r-ready{color:#2F7D5F;border-color:rgba(47,125,95,.40);background:rgba(47,125,95,.08)}
:root[data-theme="light"] .r-brace{color:#93621B;border-color:rgba(147,98,27,.40);background:rgba(147,98,27,.08)}
:root[data-theme="light"] .r-caution{color:#A3392F;border-color:rgba(163,57,47,.36);background:rgba(163,57,47,.07)}

/* ============================ CHAT (WhatsApp-familiar, Saadhav-made) ============================ */
.chat-tab{
  --c-radius:12px;
  --c-gap-tight:2px;
  --c-gap-loose:10px;
  --chat-footer-bg:transparent;
  isolation:isolate;
}
/* our own doodle wallpaper: stars, moon, lotus, a ringed planet, a diya */
.chat-tab::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' fill='none' stroke='%23e8dcbf' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M30 18 C31 25 33 27 40 28 C33 29 31 31 30 38 C29 31 27 29 20 28 C27 27 29 25 30 18Z'/%3E%3Cpath d='M128 30 a11 11 0 1 0 8 18 a8 8 0 1 1 -8 -18z'/%3E%3Ccircle cx='96' cy='96' r='9'/%3E%3Cellipse cx='96' cy='96' rx='17' ry='5' transform='rotate(-20 96 96)'/%3E%3Cpath d='M30 132 C26 124 26 116 30 108 C34 116 34 124 30 132Z M30 132 C22 128 18 122 18 114 C24 118 28 124 30 132Z M30 132 C38 128 42 122 42 114 C36 118 32 124 30 132Z'/%3E%3Cpath d='M140 140 q6 -12 12 0 q-6 6 -12 0z M146 128 v-6'/%3E%3Ccircle cx='70' cy='160' r='1.6'/%3E%3Ccircle cx='160' cy='86' r='1.6'/%3E%3Ccircle cx='62' cy='60' r='1.2'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
:root[data-theme="light"] .chat-tab::before{opacity:.16;filter:invert(.55) sepia(.6)}
:root[data-theme="light"] .chat-tab{background:#EFE6D7}

.chat-tab .chat-tab-header{gap:10px}
.chat-av{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--f-edge)}
.chat-who{display:flex;flex-direction:column;min-width:0}
.chat-who .subapp-title{font-size:18px;line-height:1.1}
.chat-status{font-size:12px;line-height:1.3;color:var(--f-text-3);margin-top:2px}

.meera-scroll{padding:10px 12px 12px;-webkit-mask-image:none;mask-image:none}
.meera-msg{
  max-width:80%;padding:7px 10px;border-radius:var(--c-radius);font-size:15px;line-height:1.42;
  box-shadow:0 1px 1px rgba(0,0,0,.18);
}
.meera-msg.meera{background:rgb(var(--f-surface-rgb));border:1px solid var(--f-edge);color:var(--f-text)}
.meera-msg.seeker{background:color-mix(in srgb,var(--f-accent) 34%,rgb(var(--f-surface-rgb)));color:var(--f-text)}
:root[data-theme="light"] .meera-msg.meera{background:#FFFBF6}
:root[data-theme="light"] .meera-msg.seeker{background:#F3D9C3}
/* WhatsApp grouping: every bubble keeps its corners; the first of a run gets the tail */
.meera-msg.meera.grp-first,.meera-msg.meera.grp-middle,.meera-msg.meera.grp-last,
.meera-msg.seeker.grp-first,.meera-msg.seeker.grp-middle,.meera-msg.seeker.grp-last{border-radius:var(--c-radius)}
.meera-msg.meera.grp-solo,.meera-msg.meera.grp-first{border-top-left-radius:4px}
.meera-msg.seeker.grp-solo,.meera-msg.seeker.grp-first{border-top-right-radius:4px}
.meera-msg.meera.grp-solo::before,.meera-msg.meera.grp-first::before{
  content:"";position:absolute;left:-7px;top:-1px;border:8px solid transparent;border-right-width:0;
  border-top-color:rgb(var(--f-surface-rgb));
}
:root[data-theme="light"] .meera-msg.meera.grp-solo::before,
:root[data-theme="light"] .meera-msg.meera.grp-first::before{border-top-color:#FFFBF6}
.meera-msg.seeker.grp-solo::after,.meera-msg.seeker.grp-first::after{
  content:"";position:absolute;right:-7px;top:0;border:8px solid transparent;border-left-width:0;
  border-top-color:color-mix(in srgb,var(--f-accent) 34%,rgb(var(--f-surface-rgb)));
}
:root[data-theme="light"] .meera-msg.seeker.grp-solo::after,
:root[data-theme="light"] .meera-msg.seeker.grp-first::after{border-top-color:#F3D9C3}
.meera-msg[data-cont="0"]{margin-top:var(--c-gap-loose)}
.meera-msg.meera{margin-left:7px}
.meera-msg.seeker{margin-right:7px}

/* chips + composer float over the wallpaper */
#meeraFooter{background:transparent;box-shadow:none}
.meera-chips{padding:6px 12px 2px}
.meera-starter{
  color:var(--f-text);background:rgba(var(--f-surface-rgb),.85);
  border:1px solid rgba(var(--f-hi-rgb),.45);border-radius:999px;padding:7px 12px;font-size:13px;
}
.meera-inputbar{padding:8px 8px 10px;align-items:flex-end;gap:8px}
.meera-input{
  min-height:46px;border-radius:24px;padding:12px 16px;font-size:15.5px;
  background:rgb(var(--f-surface-rgb));border:1px solid var(--f-edge);color:var(--f-text);
}
:root[data-theme="light"] .meera-input{background:#FFFBF6}
.meera-input::placeholder{color:var(--f-text-3)}
.meera-send{
  width:46px;height:46px;background:var(--f-cta);color:var(--f-cta-ink);
  box-shadow:0 4px 12px rgba(var(--f-accent-rgb),.40);
}
.meera-newpill{background:rgb(var(--f-surface-rgb));color:var(--f-text)}

/* ============================ BUNDLE HEADER ============================ */
/* Full-bleed like every other back bar: break out of the bundle page's pad AND
   the tab's gutter (it used to sit inset as a rounded panel). */
.tab-content .bundle-page .subapp-header{margin:-12px calc(-1 * (var(--space-md) + var(--f-gutter))) 0}

/* pay sheet mark: the family's lotus in a brass ring (the launcher PNG was a dark tile) */
.co-mark{display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:1px solid rgba(var(--f-hi-rgb),.55);box-shadow:none;background:transparent}
.co-mark img{width:62%;height:62%;object-fit:contain}

/* sub-app paywall teaser: the one family CTA (was the old gold) */
.subapp-paywall-cta{background:var(--f-cta) !important;color:var(--f-cta-ink) !important;border:0;box-shadow:var(--f-cta-shadow)}
/* Anti-Shop effect box: a recessed tint of the surface, not a black slab */
:root[data-theme="light"] .gems-gradebox{background:rgba(var(--f-hi-rgb),.08)}
:root[data-theme="light"] .gems-opt,
:root[data-theme="light"] .reclaim-step.is-settled{background:rgba(var(--f-hi-rgb),.08)}
.subapp-paywall-title{font-family:var(--font-display);font-weight:500}

/* ============================ ONE BUTTON SYSTEM ============================ */
/* Two looks, two shapes.
   Look: PRIMARY = geru gradient, ivory ink, soft geru shadow; SECONDARY = no fill,
   a hairline brass edge, body-colour text.
   Shape: a button that spans the width (Get OTP, Continue, Pay, Carry this one,
   Sign out) is a 12px rounded rectangle, the OTP submit's shape; a content-width
   button (Begin, Begin · ₹21, Unlock, the small row buttons, chips) is a capsule.
   Context rules elsewhere set sizes; these pin the look. */
.btn-primary,.co-cta,.numo-cta,.reclaim-cta,.subapp-paywall-cta,.home-card-cta,.ph-cta,.welcome-btn,.hero-begin{
  border-radius:12px !important;border:0 !important;
  background:var(--f-cta) !important;color:var(--f-cta-ink) !important;
  box-shadow:var(--f-cta-shadow) !important;
  font-family:var(--font-ui) !important;font-weight:500 !important;letter-spacing:.02em !important;
}
.btn-primary::before{display:none}
.btn-primary:disabled,.co-cta[disabled],.numo-cta:disabled,.reclaim-cta:disabled,.home-card-cta:disabled{
  background:rgba(var(--f-line-rgb),.14) !important;color:var(--f-text-3) !important;box-shadow:none !important;opacity:1;
}
.btn-secondary,.reclaim-cta-quiet,.numo-ghost,.gems-buybtn,.gems-buyback,.pf-mini-btn,.pf-signout,.tarot-fb-btn,.tarot-fb-alt,.co-notnow,.btn-skip{
  border-radius:12px !important;background:transparent !important;
  border:1px solid rgba(var(--f-hi-rgb),.40) !important;color:var(--f-text) !important;
  font-family:var(--font-ui) !important;font-weight:500 !important;box-shadow:none !important;
}
.co-notnow{border-color:transparent !important;color:var(--f-text-2) !important}
.pf-mini-btn--danger,.profile-danger-btn{border-color:rgba(200,80,70,.45) !important;color:#E89A92 !important}
:root[data-theme="light"] .pf-mini-btn--danger,:root[data-theme="light"] .profile-danger-btn{color:#A3392F !important}

/* ============================ LOADER (Sand legibility) ============================ */
:root[data-theme="light"] .load-item{opacity:.62}
:root[data-theme="light"] .pitch-loading .load-item,
:root[data-theme="light"] .bundle-loading-state .load-item,
:root[data-theme="light"] .load-breathing .load-item{opacity:.55}
:root[data-theme="light"] .pitch-loading .load-item .li-text,
:root[data-theme="light"] .bundle-loading-state .load-item .li-text,
:root[data-theme="light"] .load-breathing .load-item .li-text{color:var(--f-text-2)}
:root[data-theme="light"] .pitch-loading .load-item.done .li-text,
:root[data-theme="light"] .bundle-loading-state .load-item.done .li-text,
:root[data-theme="light"] .load-breathing .load-item.done .li-text{color:var(--f-text)}
:root[data-theme="light"] .load-foot{color:var(--f-text-2)}
:root[data-theme="light"] .load-title{color:var(--f-accent)}
/* pending loader rows: legible in Galaxy too (were .28) */
.pitch-loading .load-item,.bundle-loading-state .load-item,.load-breathing .load-item{opacity:.45}

/* ============================ SAND: hard-coded light text, re-inked ============================ */
/* Found by scanning every stylesheet for light literal `color:` values that sit on
   a surface (not on a coloured button): legible on Galaxy, invisible on sand. */
:root[data-theme="light"] .tarot-turn{color:var(--f-text);background:rgba(var(--f-hi-rgb),.10);border-left-color:rgba(var(--f-hi-rgb),.6)}
:root[data-theme="light"] .tarot-card-signifies{color:var(--f-text-2)}
:root[data-theme="light"] .onboarding-page .field-warn{color:#A3392F}
:root[data-theme="light"] .numo-coh-amplifies{color:#2F7D5F}
:root[data-theme="light"] .numo-coh-mutes{color:#93621B}
:root[data-theme="light"] .gems-tierlbl.ok,
:root[data-theme="light"] .gems-mrow.done .gems-scan-st,
:root[data-theme="light"] .pc-pro span{color:#2F7D5F}
:root[data-theme="light"] .gems-tierlbl.red,
:root[data-theme="light"] .gems-mrow.warn .gems-mtag,
:root[data-theme="light"] .gems-caution.hard,
:root[data-theme="light"] .pc-con span{color:#A3392F}
:root[data-theme="light"] .gems-sec.is-pro .gems-sl{color:#2F7D5F}
:root[data-theme="light"] .gems-sec.is-con .gems-sl{color:#A3392F}
:root[data-theme="light"] .gems-caution.soft{color:#93621B}
:root[data-theme="light"] .pitch-loading .load-item.done .li-text{color:var(--f-text)}

/* capsules: the content-width buttons (see ONE BUTTON SYSTEM) */
.hero-begin,.ph-cta,.coach-intro-cta-wrap .btn-primary,.subapp-paywall-cta,.home-card-cta,
.pf-mini-btn,.pf-seg-btn,.tarot-fb-btn,.tarot-fb-alt,.meera-starter,.meera-door-btn{border-radius:999px !important}