/* ==========================================================================
   theme.css, Karana design-token layer (single source of truth)
   Loaded AFTER styles.css. Palette ("main"): off-white bg #EFF1F0, one
   orange accent #F85E00 with sandy-gold #FC9E4F support, eerie-black ink
   #252422, black-olive #403D39 secondary surfaces, mint success (kept for
   its completed/correct semantics — a green "right answer" cue matters
   more than palette purity). Legacy gradient/glow tokens are redefined as
   flat values so every styles.css consumer collapses to flat.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LIGHT TOKENS, off-white, charcoal ink, one orange accent
   -------------------------------------------------------------------------- */
:root {
  --bg-app: #EFF1F0;
  --surface: #FFFFFF;
  --surface-alt: #E6E4E0;
  --text-main: #252422;
  --text-muted: #6E6A63;
  --border: #DEDBD5;

  --brand-primary: #F85E00;
  --brand-primary-shadow: #D14F00; /* legacy consumers use this as "pressed"; now just the hover shade */
  --brand-primary-light: #FEE7D8;

  /* Palette roles */
  --secondary: #403D39;        /* black olive: meditation/pooja, secondary accents */
  --secondary-light: #E8E6E2;
  --success: #06D6A0;          /* mint: completed / correct, always dark ink on it */
  --success-light: #DFF8EF;
  --success-ink: #04785C;   /* mint that passes contrast as text */
  --navy: #403D39;             /* ink accent, scripture, dark surfaces (legacy name) */
  --navy-light: #E8E6E2;
  --ink: #252422;

  /* Category coding, the ONLY colors content cards may use */
  --cat-mantra: #F85E00;
  --cat-meditation: #403D39;
  --cat-scripture: #252422;
  --cat-progress: #06D6A0;

  --card-marigold: #FEE7D8;
  --card-marigold-text: #963900;
  --card-tulsi: #E8E6E2;
  --card-tulsi-text: #403D39;

  /* Legacy gradient tokens, REDEFINED FLAT. styles.css consumers pick these
     up and render solid color instead of gradients. */
  --gradient-sunset: #F85E00;
  --gradient-gold: #F85E00;
  --gradient-tulsi: #403D39;
  --gradient-halo: transparent;

  /* Legacy shadow tokens, flattened, neutral only */
  --shadow-soft: 0 1px 3px rgba(37, 36, 34, 0.06);
  --shadow-btn: 0 1px 2px rgba(37, 36, 34, 0.07);
  --shadow-glow: 0 1px 2px rgba(37, 36, 34, 0.07);
  --shadow-premium: 0 1px 3px rgba(37, 36, 34, 0.06);

  /* Radii: 12px controls, 16px cards, 24px sheets; round for circles only */
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-round: 99px;

  /* New-site tokens (flat). --indigo keeps its legacy name but is now the
     deep charcoal surface used by the player and roadmap — eerie black,
     not navy. */
  --indigo: #252422;
  --indigo-deep: #1A1917;
  --gold: #FC9E4F;
  --flame: #F85E00;
  --gradient-indigo: #252422;
  --glow-flame: 0 1px 2px rgba(37, 36, 34, 0.07);
}

/* --------------------------------------------------------------------------
   2. DARK TOKENS, derived from the palette's warm charcoals, not cold navy
   -------------------------------------------------------------------------- */
body.dark-mode {
  --bg-app: #1A1917;
  --surface: #252422;
  --surface-alt: #322F2C;
  --text-main: #EFF1F0;
  --text-muted: #A6A199;
  --border: #403D39;

  --brand-primary: #F85E00;
  --brand-primary-shadow: #D14F00;
  --brand-primary-light: #40230F;

  --secondary: #4A4642;
  --secondary-light: #322F2C;
  --success: #06D6A0;
  --success-light: #0E3A2E;
  --success-ink: #7CEBC9;
  --navy: #FC9E4F;   /* the "ink accent" flips to sandy gold so it reads on charcoal */
  --navy-light: #322F2C;
  --ink: #EFF1F0;

  --cat-mantra: #F85E00;
  --cat-meditation: #4A4642;
  --cat-scripture: #55504A;
  --cat-progress: #06D6A0;

  --card-marigold: #40230F;
  --card-marigold-text: #FCB27A;
  --card-tulsi: #322F2C;
  --card-tulsi-text: #D9D4CC;

  --gradient-sunset: #F85E00;
  --gradient-gold: #F85E00;
  --gradient-tulsi: #4A4642;
  --gradient-halo: transparent;

  --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-premium: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY NORMALIZATION, no 800/900, no italic display text
   -------------------------------------------------------------------------- */
h1, h2,
.netflix-hero-title,
.nav-item,
.dpm-title,
.krm-title,
.slp-complete-title,
.slp-context-q,
.slp-meaning-q,
.slp-quiz-q,
.slp-prompt,
.twodoor-title,
.twodoor-txt b {
  font-weight: 700;
}

.krm-title em, .krm-title i,
.dpm-title em, .dpm-title i,
.slp-complete-title em, .slp-complete-title i,
.slp-moral-line em, .slp-moral-line i,
.slp-moment-final em, .slp-moment-final i,
.netflix-hero-title em, .netflix-hero-title i {
  font-style: normal;
}

/* --------------------------------------------------------------------------
   4. SHARED COMPONENTS, k-icon / k-avatar / k-icon-tile (JS agent emits)
   -------------------------------------------------------------------------- */
.k-icon {
  display: inline-block;
  vertical-align: -0.125em;
  stroke: currentColor;
  flex: none;
}

.k-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--radius-round);
  background: var(--text-muted); /* default; JS sets inline color */
  color: #FFFFFF;
  box-shadow: none;
}
.k-avatar > span {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #FFFFFF;
}
.k-avatar--lg {
  width: 64px;
  height: 64px;
}
.k-avatar--lg > span { font-size: 1.4375rem; }

.k-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 12px;
  background: var(--surface-alt);
  color: var(--text-main);
}
body.dark-mode .k-icon-tile { background: var(--surface-alt); }
.k-icon-tile .k-icon { width: 32px; height: 32px; }

/* --------------------------------------------------------------------------
   5. BUTTONS, shadcn language over the legacy selectors
   -------------------------------------------------------------------------- */
.btn-primary {
  background: var(--brand-primary);
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  height: auto;
  min-height: 44px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.btn-primary:hover { background: #D14F00; }
.btn-primary:active {
  background: #D14F00;
  transform: scale(0.985);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.btn-ghost {
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--text-muted);
  font-weight: 600;
  box-shadow: none;
  transition: background-color 0.15s ease;
}
.btn-ghost:hover { background: var(--surface-alt); }
.btn-ghost:active { background: var(--surface-alt); transform: scale(0.985); }

/* --------------------------------------------------------------------------
   6. PALETTE LEAK FIXES, flatten the styles.css hardcoded spots
   -------------------------------------------------------------------------- */

/* Streak chip in the hallow-style top bar */
.hallow-top-btn.streak-btn { background: rgba(248, 94, 0, 0.16); }
body.dark-mode .hallow-top-btn.streak-btn { background: rgba(248, 94, 0, 0.24); }

/* Weekly streak bars */
.streak-bars > div.completed { background: rgba(248, 94, 0, 0.35); }
body.dark-mode .streak-bars > div.completed { background: rgba(248, 94, 0, 0.4); }

/* Flame marker over today's bar: no glow keyframes, simple scale pulse */
.streak-bars > div.active-today::before {
  animation: themeFlamePulse 1.6s infinite ease-in-out;
  filter: none;
}
@keyframes themeFlamePulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.1); }
}

/* Routine ring completion: flat accent ring, no pulsing glow */
.ritual-ring.complete-glow {
  box-shadow: none;
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  animation: none;
}
body.dark-mode .ritual-ring.complete-glow {
  box-shadow: none;
  animation: none;
}

/* Routine step dot: neutral shadow only */
.ritual-dot { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
body.dark-mode .ritual-dot { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }

/* --------------------------------------------------------------------------
   7. TWO-DOOR ENTRY, flat cards, borders not glows
   -------------------------------------------------------------------------- */
.twodoor-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 18px 0;
}

.twodoor-learn,
.twodoor-explore {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px;
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

/* Primary door: flat accent */
.twodoor-learn {
  background: var(--brand-primary);
  color: #fff;
  border: 1px solid var(--brand-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.twodoor-learn:active {
  background: #D14F00;
  border-color: #D14F00;
  transform: scale(0.985);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Secondary door: quiet surface card, 1px border */
.twodoor-explore {
  background: var(--surface);
  color: var(--text-main);
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.twodoor-explore:active {
  background: var(--surface-alt);
  transform: scale(0.985);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.twodoor-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 12px;
  font-size: 1.5rem;
}
.twodoor-learn .twodoor-icon {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.twodoor-explore .twodoor-icon {
  background: var(--brand-primary-light);
  color: var(--brand-primary);
}
.twodoor-icon .material-symbols-rounded { font-size: 1.625rem; }
.twodoor-icon .k-icon { width: 24px; height: 24px; }

/* Integration markup variant: bare leading icon + trailing chevron */
.twodoor-learn > .material-symbols-rounded:first-child,
.twodoor-explore > .material-symbols-rounded:first-child,
.twodoor-learn > .k-icon:first-child,
.twodoor-explore > .k-icon:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 12px;
  font-size: 1.625rem;
  padding: 12px;
  box-sizing: border-box;
}
.twodoor-learn > .material-symbols-rounded:first-child,
.twodoor-learn > .k-icon:first-child {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.twodoor-explore > .material-symbols-rounded:first-child,
.twodoor-explore > .k-icon:first-child {
  background: var(--brand-primary-light);
  color: var(--brand-primary);
}
.twodoor-learn > .material-symbols-rounded:last-child,
.twodoor-explore > .material-symbols-rounded:last-child,
.twodoor-learn > .k-icon:last-child,
.twodoor-explore > .k-icon:last-child {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  padding: 0;
  background: none;
  font-size: 1.25rem;
  opacity: 0.6;
}

.twodoor-text,
.twodoor-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
}
.twodoor-title,
.twodoor-txt b {
  font-family: var(--font-title);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
}
.twodoor-sub,
.twodoor-txt small {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
}
.twodoor-learn .twodoor-sub,
.twodoor-learn .twodoor-txt small { color: rgba(255, 255, 255, 0.85); }
.twodoor-explore .twodoor-sub,
.twodoor-explore .twodoor-txt small { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   8. MASCOT BUBBLE, flat avatar circle, quiet card bubble
   -------------------------------------------------------------------------- */
.mascot-bubble {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin: 14px 0;
}

.mascot-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: var(--radius-round);
  font-size: 1.375rem;
  line-height: 1;
  background: var(--brand-primary);
  color: #fff;
  box-shadow: none;
}
.mascot-avatar > span,
.mascot-avatar b {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.mascot-speech {
  position: relative;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  color: var(--text-main);
  font-size: 0.90625rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  min-width: 0;
}
.mascot-speech::before {
  content: '';
  position: absolute;
  left: -6px;
  bottom: 14px;
  width: 11px;
  height: 11px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   9. DRAFT BANNER, quiet flat chip, sentence case
   -------------------------------------------------------------------------- */
.draft-banner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--brand-primary-light);
  border: 1px solid var(--border);
  color: var(--card-marigold-text);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: normal;
}
body.dark-mode .draft-banner {
  background: var(--card-marigold);
  border-color: var(--border);
  color: var(--card-marigold-text);
}