/* ═══════════════════════════════════════════════════════════════
   MHDSRIP — Theme overrides
   Sky (default, loaded from tokens.css), Earth, Social.
   Only overrides what changes — keep this tight.
   ═══════════════════════════════════════════════════════════════ */

/* ── EARTH — warm sepia, terracotta, sage ───────────────────── */
[data-theme="earth"] {
  --bg:          #faf5ec;
  --bg-soft:     #f3ead6;
  --bg-paper:    #fdfaf2;

  --ink:         #2a1e13;
  --ink-soft:    #4e3c2b;
  --ink-muted:   #76624c;
  --ink-quiet:   #9a8672;

  --accent:       #8c5a2c;
  --accent-deep:  #603d1a;
  --accent-darker:#42280f;
  --accent-light: #d4a25f;
  --accent-soft:  #f4e4c9;
  --accent-wash:  #f9f0df;

  --line:         #e8dbc4;
  --line-strong:  #d8c4a4;
  --line-hair:    color-mix(in srgb, #2a1e13 10%, transparent);

  --card:          var(--bg-paper);
  --card-elevated: #fff;

  --gold-50: #b58645;
  --heart:   #b74a3c;
}
[data-theme="earth"] .shell::before {
  filter: sepia(0.55) saturate(0.9) hue-rotate(-12deg);
}

/* ── SOCIAL — feed-native, Facebook-energy blue, rounded ────── */
[data-theme="social"] {
  --bg:       #f0f2f5;
  --bg-soft:  #e4e6eb;
  --bg-paper: #ffffff;

  --ink:       #050505;
  --ink-soft:  #1c1e21;
  --ink-muted: #474b52;
  --ink-quiet: #65676b;

  --accent:       #0866ff;
  --accent-deep:  #1a4bcf;
  --accent-darker:#0c339b;
  --accent-light: #3b82f6;
  --accent-soft:  #e3ecff;
  --accent-wash:  #eff4ff;

  --line:         #dadde1;
  --line-strong:  #c7ccd2;

  --fw-display: 700;
  --fw-heading: 700;

  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 32px;
}
[data-theme="social"] .btn {
  border-radius: var(--r-pill);
  font-weight: 700;
}
[data-theme="social"] input,
[data-theme="social"] textarea,
[data-theme="social"] select {
  border-radius: var(--r-pill);
  padding-inline: var(--s-5);
}
[data-theme="social"] textarea { border-radius: var(--r-lg); }
[data-theme="social"] .otp-boxes input { border-radius: var(--r-md); padding: 0; }
[data-theme="social"] .card {
  border: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 8px 20px rgba(0,0,0,0.06);
}
[data-theme="social"] .shell::before { opacity: 0.08; filter: saturate(1.15) contrast(1.05); }
[data-theme="social"] .brand-name .rip { color: var(--accent-light); }

/* Smooth transitions when switching themes */
html, body,
.shell, .shell::before,
.card, .btn, .input,
input, textarea, select,
.pill, .chip, .topbar,
.theme-switch, .theme-switch button,
.preview, .theme-opt {
  transition:
    background var(--dur-slow) var(--ease-gentle),
    color var(--dur-slow) var(--ease-gentle),
    border-color var(--dur-slow) var(--ease-gentle);
}