/* theme-shared.css — Grace Portal shared theme system v1
 *
 * Mounted on monolith pages: try-grace.com, /verify, /owner-info, /store-info.
 * Same 4 themes as the dashboard but in a shared file so all monolith pages
 * stay in sync.
 *
 * Each page already defines its own :root with --navy/--gold/--cyan etc.
 * This file ADDS extra variables (--text, --card, --div, --soft, --muted,
 * --inner, --accent, etc.) and the theme override blocks.
 *
 * Default = Gray-White (no localStorage.grace_theme set on first visit).
 * Page's existing :root values are the Navy-theme baseline; override
 * blocks below replace them when html[data-theme="..."] is set.
 */

:root {
  /* Extras the page's own :root may not define. Safe even if duplicated —
     CSS cascade prefers per-file :root values, this file is loaded BEFORE
     the page's inline <style> so per-page can still override defaults. */
  --text:            #e2e8f0;
  --soft:            #CBD5E1;
  --muted:           #4a6080;
  --card:            #0E1E35;
  --div:             #1C3556;
  --inner:           rgba(11,26,46,.72);
  --inner-soft:      rgba(11,26,46,.55);
  --chip-off:        rgba(74,96,128,.12);
  --chip-off-border: rgba(74,96,128,.25);
  --accent:          #F5A623;
  --slate:           #CBD5E1;
}

/* ── Theme: Gray - White (default for new visitors) ─────────────── */
html[data-theme='light-gray'] {
  --navy:            #ECEEF1;
  --navy2:#FFFFFF;
  --navy3:#FFFFFF;
  --card:            #FFFFFF;
  --div:             #C8CDD3;
  --soft:            #3a3f47;
  --muted:           #6a7077;
  --text:            #1a1a1a;
  --cyan:            #000000;
  --inner:#FFFFFF;
  --inner-soft:#FFFFFF;
  --chip-off:        #E3E6EA;
  --chip-off-border: #C5CAD0;
  --accent:          #000000;
  --slate:           #3a3f47;
  --navy-2:#FFFFFF;--navy-mid:#FFFFFF;--navy-light:#FFFFFF;--white:#000000}

/* ── Theme: White (all white, max contrast) ─────────────────────── */
html[data-theme='off-white'] {
  --navy:            #FFFFFF;
  --navy2:           #FFFFFF;
  --navy3:           #FFFFFF;
  --card:            #FFFFFF;
  --div:             #E5E5E5;
  --soft:            #1a1a1a;
  --muted:           #666666;
  --text:            #000000;
  --cyan:            #000000;
  --inner:           #FFFFFF;
  --inner-soft:      #FFFFFF;
  --chip-off:        #F5F5F5;
  --chip-off-border: #E0E0E0;
  --accent:          #000000;
  --slate:           #1a1a1a;
  --navy-2:#FFFFFF;--navy-mid:#FFFFFF;--navy-light:#FFFFFF;--white:#000000}

/* ── Theme: White - Gray (white bg, subtle gray panels) ─────────── */
html[data-theme='white'] {
  --navy:            #FFFFFF;
  --navy2:           #F4F6F8;
  --navy3:           #FAFAFA;
  --card:            #FAFBFC;
  --div:             #D9DEE3;
  --soft:            #3a3f47;
  --muted:           #6a7077;
  --text:            #1a1a1a;
  --cyan:            #000000;
  --inner:           #F4F6F8;
  --inner-soft:      #FAFBFC;
  --chip-off:        #EBEDF0;
  --chip-off-border: #D9DEE3;
  --accent:          #000000;
  --slate:           #3a3f47;
  --navy-2:#F4F6F8;--navy-mid:#D9DEE3;--navy-light:#E5E9ED;--white:#000000}

/* Soften any modal-overlay backdrops on light themes (less heavy dim). */
html[data-theme='off-white']  .overlay,
html[data-theme='off-white']  .modal-overlay { background: rgba(0,0,0,0.35) !important; }
html[data-theme='light-gray'] .overlay,
html[data-theme='light-gray'] .modal-overlay { background: rgba(0,0,0,0.40) !important; }
html[data-theme='white']      .overlay,
html[data-theme='white']      .modal-overlay { background: rgba(0,0,0,0.35) !important; }


/* ── Floating theme toggle UI (auto-injected by theme-shared.js) ── */
.theme-fab {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 99998;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--navy2);
  border: 1px solid var(--div);
  color: var(--accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  transition: transform 0.15s, background 0.15s;
}
.theme-fab:hover { transform: scale(1.05); background: var(--div); }
.theme-fab svg   { pointer-events: none; }

.theme-fab-menu {
  position: fixed;
  top: 64px;
  right: 16px;
  z-index: 99999;
  background: var(--navy2);
  border: 1px solid var(--div);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  min-width: 180px;
  display: none;
  font-family: inherit;
}
.theme-fab-menu.open { display: block; }

.theme-fab-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 14px;
  color: var(--soft);
  transition: 0.1s;
  position: relative;
}
.theme-fab-item:hover  { background: var(--div); color: var(--text); }
.theme-fab-item.active {
  background: var(--div);
  color: var(--accent);
  font-weight: 600;
}
.theme-fab-item.active::after {
  content: '\2713';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 16px;
  font-weight: 700;
}
.theme-fab-swatch {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid var(--div);
  flex-shrink: 0;
}

/* Try Grace buttons (.nav-try + .btn-primary) — force black text on the 3
   light themes only. Keep navy-on-gold on Navy + Mix themes (original). */
html[data-theme='light-gray'] .nav-try,
html[data-theme='light-gray'] .nav-try:hover,
html[data-theme='light-gray'] .btn-primary,
html[data-theme='off-white']  .nav-try,
html[data-theme='off-white']  .nav-try:hover,
html[data-theme='off-white']  .btn-primary,
html[data-theme='white']      .nav-try,
html[data-theme='white']      .nav-try:hover,
html[data-theme='white']      .btn-primary {
  color: #000 !important;
}
strong{font-size:1.08em;}