@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Noto+Serif+Devanagari:wght@400;500&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

:root {
  color-scheme: dark;
  --c-bg:      #080603;
  /* --bg was previously "#07060400" — an 8-digit hex with alpha 00 = fully
     transparent. Many older screens use var(--bg) as their root background
     and so rendered transparent in light theme. Alias it to --c-bg instead. */
  --bg:        var(--c-bg);
  --c-s1:      #0F0C07;
  --c-s2:      #181209;
  --c-s3:      #221810;
  --c-border:  rgba(201,152,42,0.10);
  --c-border-hi: rgba(201,152,42,0.26);

  --c-gold:    #C9982A;
  --c-gold-lt: #E2B84A;
  --c-saffron: #C85A28;
  --c-cream:   #EAD8B8;
  --c-cream2:  #A8906A;
  --c-muted:   #645038;
  --c-dim:     #362A1A;

  --c-green:   #3A8A62;
  --c-red:     #A83422;
  --c-blue:    #3060A0;
  --c-purple:  #6A3A98;

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-full: 999px;

  --f-display: 'Cinzel', serif;
  --f-head:    'Playfair Display', serif;
  --f-body:    'DM Sans', sans-serif;

  --shadow-card: 0 2px 16px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 32px rgba(201,152,42,0.12);

  /* ════════════════════════════════════════════════════════════════════
     MOBILE-FIRST SYSTEM (2026 redesign) — spacing, type, touch, motion.
     Additive: every legacy token above is preserved. New screens build
     on these; the floor is "comfortable on a phone, tappable one-handed".
     ════════════════════════════════════════════════════════════════════ */

  /* Spacing — 4-pt grid. Use these instead of magic numbers. */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px;  --sp-7: 32px;  --sp-8: 40px;  --sp-9: 56px;
  --gutter: 20px;                 /* standard screen side padding */

  /* Touch targets — Apple HIG floor is 44; primary actions use 48-52. */
  --touch-min: 44px;
  --touch: 48px;

  /* Type scale — readable floor. Nothing below 11px, body is 15px. */
  --t-2xs: 11px;   /* captions / eyebrow labels only */
  --t-xs:  12px;
  --t-sm:  13px;
  --t-base: 15px;  /* default body */
  --t-md:  17px;
  --t-lg:  20px;
  --t-xl:  24px;
  --t-2xl: 30px;
  --t-3xl: 38px;
  --lh-tight: 1.22;
  --lh-snug:  1.4;
  --lh-body:  1.6;

  /* Motion */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 120ms;  --dur-2: 200ms;  --dur-3: 320ms;

  /* Elevation — warm, soft, layered (dark-theme values; light overrides below) */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.30);
  --shadow-md:  0 6px 20px rgba(0,0,0,0.40);
  --shadow-lg:  0 16px 40px rgba(0,0,0,0.50);
  --shadow-pop: 0 20px 56px rgba(0,0,0,0.62);

  /* ── Legacy variable aliases ─────────────────────────────────────────
     Older screens (profile, consult, services, onboarding, home) use these
     short names. They are dynamic aliases — the cascade re-evaluates them
     at point of use, so light-theme overrides on --c-* flow through. */
  --cream:        var(--c-cream);
  --cream2:       var(--c-cream2);
  --muted:        var(--c-muted);
  --gold:         var(--c-gold);
  --gold-lt:      var(--c-gold-lt);
  --saffron:      var(--c-saffron);
  --surface:      var(--c-s1);
  --surface2:     var(--c-s2);
  --surface3:     var(--c-s3);
  --border:       var(--c-border);
  --border-hi:    var(--c-border-hi);
  --red:          var(--c-red);
  --green:        var(--c-green);
  --blue:         var(--c-blue);
  --purple:       var(--c-purple);
  --dim:          var(--c-dim);
  --font-display: var(--f-display);
  --font-head:    var(--f-head);
  --font-body:    var(--f-body);
}

/* ════════════════════════════════════════════════════════════════════
   TARA Animation Library — curated subset
   See: N:\RahuNow\Astro Rules\TARA_ANIMATIONS.md (Modules A–J)
   See: N:\RahuNow\Astro Rules\TARA_ANIMATIONS_EXTENDED.md (Modules K–V)
   Every animation here is referenced from at least one screen. Keep tight.
   ════════════════════════════════════════════════════════════════════ */

/* Entrance */
@keyframes taraFadeUp     { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes taraFadeIn     { from { opacity:0; } to { opacity:1; } }
@keyframes taraScaleIn    { from { opacity:0; transform:scale(0.92); } to { opacity:1; transform:scale(1); } }
@keyframes taraGlyphPop   { 0% { opacity:0; transform:scale(0.7); } 70% { transform:scale(1.06); } 100% { opacity:1; transform:scale(1); } }
@keyframes taraGlyphDrop  { from { opacity:0; transform:translateY(-8px) scale(0.85); } to { opacity:1; transform:translateY(0) scale(1); } }

/* Orbit / spin */
@keyframes taraOrbit      { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes taraOrbitR     { from { transform:rotate(0deg); } to { transform:rotate(-360deg); } }

/* Pulse / glow / twinkle */
@keyframes taraPulse      { 0%,100% { opacity:0.4; transform:scale(1); } 50% { opacity:0.9; transform:scale(1.08); } }
@keyframes taraRingExpand { from { opacity:0.7; transform:scale(0.8); } to { opacity:0; transform:scale(1.6); } }
@keyframes taraTwinkle    { 0%,100% { opacity:0.2; transform:scale(0.8); } 50% { opacity:1; transform:scale(1.2); } }
@keyframes taraFloat      { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }

/* Planet states */
@keyframes taraExaltedGlow      { 0%,100% { stroke-width:1; opacity:0.5; } 50% { stroke-width:2.5; opacity:1; } }
@keyframes taraCombustFlicker   { 0%,100% { opacity:1; transform:scale(1); } 25% { opacity:0.55; transform:scale(0.9); } 75% { opacity:0.85; transform:scale(1.05); } }
@keyframes taraDebilFade        { 0%,100% { opacity:0.5; } 50% { opacity:0.2; } }
@keyframes taraRetroSymbol      { from { opacity:0; transform:rotate(-20deg) scale(0.6); } to { opacity:1; transform:rotate(0deg) scale(1); } }

/* Data drawing */
@keyframes taraDrawArc          { from { stroke-dashoffset:var(--arc-len, 300); } to { stroke-dashoffset:0; } }
@keyframes taraHighlightSweep   { from { stroke-dashoffset:200; opacity:0; } to { stroke-dashoffset:0; opacity:1; } }
@keyframes taraBarFill          { from { width:0; } to { width:var(--target-width); } }
@keyframes taraScanLine         { from { transform:translateY(-100%); opacity:0.6; } to { transform:translateY(400%); opacity:0; } }

/* Dasha bar */
@keyframes taraDashaActive      { 0%,100% { box-shadow:0 0 0 0 rgba(201,152,42,0.45); } 50% { box-shadow:0 0 0 6px rgba(201,152,42,0); } }

/* Tara entrance utility classes — drop on any element for a polished fade-up */
.tara-enter      { opacity:0; animation: taraFadeUp 0.55s ease forwards; }
.tara-enter-soft { opacity:0; animation: taraFadeIn 0.5s ease forwards; }
.tara-d0   { animation-delay: 0s; }
.tara-d1   { animation-delay: 0.06s; }
.tara-d2   { animation-delay: 0.12s; }
.tara-d3   { animation-delay: 0.20s; }
.tara-d4   { animation-delay: 0.28s; }
.tara-d5   { animation-delay: 0.36s; }
.tara-d6   { animation-delay: 0.44s; }
.tara-d7   { animation-delay: 0.52s; }
.tara-d8   { animation-delay: 0.62s; }

/* Tara micro-interactions — opt-in via class */
.tara-lift       { transition: border-color 200ms ease, transform 200ms ease; }
.tara-lift:hover { transform: translateY(-2px); }
.tara-slide      { transition: border-color 200ms ease, transform 150ms ease; }
.tara-slide:hover { transform: translateX(2px); }
.tara-live-dot   { width:8px; height:8px; border-radius:50%; background: var(--c-gold); animation: taraPulse 2.4s ease-in-out infinite; }

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

*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--c-bg); color: var(--c-cream); font-family: var(--f-body);
  font-size: var(--t-base); line-height: var(--lh-body);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Keyboard focus only — never on touch/mouse press. Accessibility win. */
:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; border-radius: 4px; }

/* Scrollbar */
::-webkit-scrollbar { width: 2px; height: 2px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-dim); border-radius: 2px; }

button { font-family: var(--f-body); cursor: pointer; }
input, select, textarea { font-family: var(--f-body); }

/* ── Utility ── */
.gold { color: var(--c-gold); }
.cream { color: var(--c-cream); }
.muted { color: var(--c-muted); }
.saffron { color: var(--c-saffron); }

.grad-gold {
  background: linear-gradient(135deg, var(--c-gold-lt), var(--c-gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── Card system ── */
.card {
  background: var(--c-s1);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.card-hi {
  background: linear-gradient(145deg, var(--c-s2) 0%, var(--c-s1) 100%);
  border: 1px solid var(--c-border-hi);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.card-flat {
  background: var(--c-s1);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: var(--r-full); font-family: var(--f-body);
  font-weight: 500; cursor: pointer; transition: opacity 0.15s, transform 0.1s;
}
.btn:active { opacity: 0.8; transform: scale(0.97); }

.btn-primary {
  background: linear-gradient(135deg, #C98A28, #A8681A);
  color: #F5E8C8; font-size: 15px; font-weight: 600;
  height: 52px; padding: 0 28px; width: 100%;
  box-shadow: 0 4px 20px rgba(180,120,30,0.35);
  letter-spacing: 0.2px;
}
.btn-ghost {
  background: transparent;
  color: var(--c-cream); font-size: 15px;
  height: 48px; padding: 0 22px; width: 100%;
  border: 1px solid var(--c-border-hi);
}
.btn-sm {
  height: 44px; padding: 0 20px; font-size: 13px; font-weight: 600;
  background: rgba(201,152,42,0.12); color: var(--c-gold);
  border: 1px solid rgba(201,152,42,0.2); border-radius: var(--r-full);
}

/* ── Label ── */
.section-label {
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--c-muted);
}

/* ── Divider ── */
.divider { height: 1px; background: var(--c-border); }

/* ── Tag/pill ── */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 11px; border-radius: var(--r-full);
  font-size: var(--t-2xs); font-weight: 600; line-height: 1.3;
  background: rgba(201,152,42,0.08); color: var(--c-gold-lt);
  border: 1px solid rgba(201,152,42,0.18);
}
.tag-green { background: rgba(58,138,98,0.12); color: #5ABB8A; border-color: rgba(58,138,98,0.2); }
.tag-red   { background: rgba(168,52,34,0.12); color: #D0604A; border-color: rgba(168,52,34,0.2); }
.tag-blue  { background: rgba(48,96,160,0.12); color: #6898D0; border-color: rgba(48,96,160,0.2); }

/* ════════════════════════════════════════════════════════════════════
   MOBILE PRIMITIVES (2026 redesign)
   Reusable building blocks tuned for one-handed phone use. Every
   interactive primitive clears the 44px touch floor by construction.
   ════════════════════════════════════════════════════════════════════ */

/* Press feedback — drop onto any tappable element. */
.pressable { transition: transform var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease), background var(--dur-2) var(--ease); -webkit-user-select: none; user-select: none; }
.pressable:active { transform: scale(0.97); opacity: 0.92; }

/* Consistent screen container: standard side gutter + bottom breathing room. */
.rn-screen { padding: var(--sp-2) var(--gutter) var(--sp-8); }

/* Segmented control — replaces the thin 2px-underline tab rows everywhere. */
.rn-segment {
  display: flex; gap: 4px; padding: 4px;
  background: var(--c-s2); border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.rn-seg-btn {
  flex: 1; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; background: transparent; border-radius: calc(var(--r-md) - 4px);
  color: var(--c-muted); font-family: var(--f-body); font-size: var(--t-sm); font-weight: 600;
  cursor: pointer; transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.rn-seg-btn[aria-selected="true"], .rn-seg-btn.is-active {
  background: var(--c-s1); color: var(--c-gold);
  box-shadow: var(--shadow-sm);
}

/* List row — settings, menus, ranked lists. ≥56px, full-width tap. */
.rn-row {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; min-height: 56px; padding: var(--sp-3) var(--sp-4);
  background: transparent; border: none; text-align: left;
  color: var(--c-cream); font-family: var(--f-body); font-size: var(--t-base);
  cursor: pointer; border-radius: var(--r-md);
  transition: background var(--dur-2) var(--ease);
}
.rn-row:active { background: rgba(201,152,42,0.06); }

/* Tappable chip — filters, planet toggles, quick-selects. ≥40px. */
.rn-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 16px; flex-shrink: 0;
  border-radius: var(--r-full); border: 1px solid var(--c-border-hi);
  background: var(--c-s2); color: var(--c-cream2);
  font-family: var(--f-body); font-size: var(--t-sm); font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.rn-chip.is-active { background: rgba(201,152,42,0.14); color: var(--c-gold); border-color: var(--c-gold); }

/* Standard input — never below 48px; 16px font avoids iOS zoom-on-focus. */
.rn-input {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 14px;
  background: var(--c-s2); border: 1px solid var(--c-border);
  border-radius: var(--r-md); color: var(--c-cream); font-size: 16px;
  font-family: var(--f-body); outline: none;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.rn-input:focus { border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(201,152,42,0.16); }
.rn-input::placeholder { color: var(--c-muted); }

/* Horizontal scroller — snap + edge fade so the "swipe for more" affordance reads. */
.rn-hscroll {
  display: flex; gap: var(--sp-3); overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 4px;
  scroll-padding-left: var(--gutter);
}
.rn-hscroll::-webkit-scrollbar { display: none; }
.rn-hscroll > * { scroll-snap-align: start; flex-shrink: 0; }
/* Bleed to the screen edges, but keep first/last item aligned to the gutter. */
.rn-hscroll.bleed { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); }

/* Bottom sheet — the standard modal surface on mobile. */
.rn-sheet-backdrop {
  position: absolute; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: flex-end; animation: taraFadeIn var(--dur-2) var(--ease) both;
}
.rn-sheet {
  width: 100%; background: var(--c-s1);
  border-top: 1px solid var(--c-border-hi);
  border-radius: 28px 28px 0 0;
  max-height: 90%; overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: var(--shadow-pop);
  animation: rnSheetUp var(--dur-3) var(--ease-out) both;
}
@keyframes rnSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.rn-sheet-handle { display: flex; justify-content: center; padding: 10px 0 2px; }
.rn-sheet-handle::before { content: ""; width: 40px; height: 5px; border-radius: 99px; background: var(--c-border-hi); }

/* Sticky bottom action bar — keeps the primary CTA in the thumb zone. */
.rn-sticky-cta {
  position: sticky; bottom: 0; z-index: 20;
  padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--c-bg) 62%, transparent);
}

/* ════════════════════════════════════════════════════════════
   LIGHT THEME — "Ivory"
   Clean, professional Vedic UI: warm white surfaces, deep
   charcoal text, antique gold accent used sparingly.
   ════════════════════════════════════════════════════════════ */

[data-theme="light"] {
  color-scheme: light;
  /* Surfaces — clean warm ivory */
  --c-bg:        #F2EDE4;
  --c-s1:        #FFFFFF;
  --c-s2:        #F7F3EC;
  --c-s3:        #EDE7DB;
  --c-border:    rgba(30,20,10,0.09);
  --c-border-hi: rgba(150,100,20,0.28);

  /* Antique gold — accent only, not background */
  --c-gold:      #9A6C10;
  --c-gold-lt:   #C08A22;
  --c-saffron:   #A83820;

  /* Deep readable text */
  --c-cream:     #1A1410;
  --c-cream2:    #483828;
  --c-muted:     #7C6A58;
  --c-dim:       #B0A090;

  /* Semantic */
  --c-green:     #1A6832;
  --c-red:       #8A1808;
  --c-blue:      #1A3870;
  --c-purple:    #3A1A70;

  --shadow-card: 0 2px 12px rgba(30,20,10,0.07);
  --shadow-glow: 0 0 24px rgba(150,100,20,0.10);

  /* Mobile-system elevations — soft warm-charcoal tints for the light surface */
  --shadow-sm:  0 1px 2px rgba(40,25,10,0.06);
  --shadow-md:  0 6px 20px rgba(40,25,10,0.09);
  --shadow-lg:  0 16px 40px rgba(40,25,10,0.13);
  --shadow-pop: 0 20px 56px rgba(40,25,10,0.18);

  /* ── Legacy aliases — explicit redeclaration in light scope ───────
     Belt-and-braces: alias chains can be fragile when the override
     scope (`[data-theme="light"]`) sits BELOW :root in the cascade
     but never re-evaluates intermediate aliases. Redeclare every
     legacy name explicitly so older screens (profile, consult,
     services, onboarding) light-mode for sure. */
  --bg:           var(--c-bg);
  --cream:        var(--c-cream);
  --cream2:       var(--c-cream2);
  --muted:        var(--c-muted);
  --gold:         var(--c-gold);
  --gold-lt:      var(--c-gold-lt);
  --saffron:      var(--c-saffron);
  --surface:      var(--c-s1);
  --surface2:     var(--c-s2);
  --surface3:     var(--c-s3);
  --border:       var(--c-border);
  --border-hi:    var(--c-border-hi);
  --red:          var(--c-red);
  --green:        var(--c-green);
  --blue:         var(--c-blue);
  --purple:       var(--c-purple);
  --dim:          var(--c-dim);
}

/* ── Stage: deep warm slate background ── */
[data-theme="light"] #stage {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(180,140,80,0.12) 0%, transparent 50%),
    #1C1814 !important;
}

/* ── Phone shell: clean silver-white ── */
[data-theme="light"] .phone-shell {
  border: 1.5px solid rgba(200,190,180,0.55) !important;
  box-shadow:
    0 0 0 7px #2A2420,
    0 0 0 8.5px rgba(255,255,255,0.06),
    0 40px 100px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.04) !important;
}

[data-theme="light"] .notch     { background: #E8E2D8 !important; }
[data-theme="light"] .home-bar  { background: rgba(30,20,10,0.15) !important; }
[data-theme="light"] .sb-time   { color: #1A1410 !important; }
[data-theme="light"] body       { background: #1C1814 !important; }

/* ── App viewport: clean warm white ── */
[data-theme="light"] .app-viewport {
  background-color: var(--c-bg);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(180,130,40,0.06) 0%, transparent 55%);
}

/* ── Cards: crisp white with subtle shadow ── */
[data-theme="light"] .card {
  background: #FFFFFF;
  border: 1px solid rgba(30,20,10,0.08) !important;
  box-shadow: 0 1px 8px rgba(30,20,10,0.06), 0 4px 20px rgba(30,20,10,0.04);
}

[data-theme="light"] .card-hi {
  background: #FFFFFF;
  border: 1px solid rgba(150,100,20,0.18) !important;
  border-left: 3px solid rgba(154,108,16,0.5) !important;
  box-shadow: 0 2px 16px rgba(30,20,10,0.08), 0 8px 32px rgba(30,20,10,0.04) !important;
}

[data-theme="light"] .card-flat {
  background: #F7F3EC;
  border: 1px solid rgba(30,20,10,0.07);
}

/* ── Section labels ── */
[data-theme="light"] .section-label {
  color: rgba(124,106,88,0.9);
  letter-spacing: 1.8px;
}

/* ── Dividers ── */
[data-theme="light"] .divider {
  background: rgba(30,20,10,0.08);
  height: 1px;
}

/* ── Tags ── */
[data-theme="light"] .tag {
  background: rgba(154,108,16,0.08);
  color: #8A5E08;
  border-color: rgba(154,108,16,0.20);
}
[data-theme="light"] .tag-green {
  background: rgba(26,104,50,0.08);
  color: #1A6832;
  border-color: rgba(26,104,50,0.20);
}
[data-theme="light"] .tag-red {
  background: rgba(138,24,8,0.08);
  color: #8A1808;
  border-color: rgba(138,24,8,0.18);
}

/* ── Buttons ── */
[data-theme="light"] .btn-primary {
  background: linear-gradient(135deg, #1A1410, #2E2420);
  color: #F5EED8;
  box-shadow: 0 4px 18px rgba(0,0,0,0.25);
}
[data-theme="light"] .btn-ghost {
  border-color: rgba(30,20,10,0.18);
  color: var(--c-cream);
}
[data-theme="light"] .btn-sm {
  background: rgba(154,108,16,0.08);
  color: #8A5E08;
  border-color: rgba(154,108,16,0.20);
}

/* ── Top bar ── */
[data-theme="light"] .rahu-topbar {
  background: #FFFFFF;
  border-bottom: 1px solid rgba(30,20,10,0.09) !important;
  box-shadow: 0 1px 8px rgba(30,20,10,0.05);
}

/* ── Bottom nav ── */
[data-theme="light"] .rahu-botnav {
  background: #FFFFFF;
  border-top: 1px solid rgba(30,20,10,0.09) !important;
  box-shadow: 0 -1px 8px rgba(30,20,10,0.05);
}

/* ── Scrollbar ── */
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(30,20,10,0.15); }

/* ── Input fields ── */
[data-theme="light"] input,
[data-theme="light"] select {
  background: #F7F3EC !important;
  border-color: rgba(30,20,10,0.12) !important;
  color: #1A1410 !important;
  color-scheme: light !important;
}
[data-theme="light"] input::placeholder { color: rgba(124,106,88,0.55) !important; }

/* ── Nav active glow ── */
[data-theme="light"] .rahu-nav-active-ring {
  background: rgba(154,108,16,0.10) !important;
}