/* Tatame global dark/light bridge.
   Loaded by static pages that do not use the full app design system. */

:root {
  color-scheme: dark;
  --bg: #050505;
  --bg2: #0B0B0C;
  --bg3: #111111;
  --bg4: #181818;
  --panel: #111111;
  --panel2: #181818;
  --border: #2A2A2A;
  --border2: #343434;
  --text: #FFFFFF;
  --text2: #D4D4D8;
  --muted: #71717A;
  --muted2: #A1A1AA;
  --green: #22C55E;
  --gdim: rgba(34, 197, 94, .09);
  --gmid: rgba(34, 197, 94, .20);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #F6F8FB;
  --bg2: #FFFFFF;
  --bg3: #F1F5F9;
  --bg4: #E8EEF6;
  --panel: #FFFFFF;
  --panel2: #F8FAFC;
  --border: rgba(15, 23, 42, .10);
  --border2: rgba(15, 23, 42, .16);
  --text: #0F172A;
  --text2: #475569;
  --muted: #94A3B8;
  --muted2: #64748B;
  --green: #16A34A;
  --gdim: rgba(22, 163, 74, .09);
  --gmid: rgba(22, 163, 74, .20);
}

html[data-theme] body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

html[data-theme] :where(.card,.panel,.box,.container-card,.auth-card,.plan-card,.pricing-card,.status-banner,.benefits,.faq-item,.doc-card,.post-card,.checkout-card,.public-card,.info-item,.bio-card,.link-btn) {
  background-color: var(--panel) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

html[data-theme] :where(input,textarea,select) {
  background-color: var(--bg2) !important;
  border-color: var(--border2) !important;
  color: var(--text) !important;
}

html[data-theme] :where(p,small,label,.muted,.subtitle,.lead,.desc,.description,.meta,.help,.hint,.empty,.footer,.copyright) {
  color: var(--text2) !important;
}

html[data-theme] :where(a) {
  color: var(--green);
}

html[data-theme] :where(.btn,.button,.btn-secondary,.btn-outline,button:not(.btn-primary):not(.btn-cta):not(.btn-green)) {
  border-color: var(--border2);
}

html[data-theme="light"] :where(.hero,.section,.page,.main,.content,.wrapper,.shell) {
  background-color: var(--bg) !important;
}

html[data-theme="light"] :where(.tatame-consent__box,.tatame-menu,.modal,.sheet) {
  background-color: var(--panel) !important;
  border-color: var(--border) !important;
}