/* Distance — shared light-mode safeguard.
   Catches inline-rgba cream styles AND static Tailwind classes (text-cream, bg-cream, etc.)
   that would otherwise render cream-on-cream in light mode.
   Loaded on every prototype page after Tailwind. */

/* 1. Inline-style safeguard — catches `style="color: rgba(242,235,216,X)"` and #F2EBD8 */
body.light-mode [style*="color: rgba(242,235,216"],
body.light-mode [style*="color: rgba(242, 235, 216"] { color: rgba(26,29,40,0.80) !important; }
body.light-mode [style*="color: #F2EBD8"] { color: #1A1D28 !important; }

/* 2. Tailwind static-class overrides — these classes are baked at build-time and don't adapt */
body.light-mode .text-cream { color: #1A1D28 !important; }
body.light-mode .text-muted { color: rgba(26,29,40,0.55) !important; }
body.light-mode .bg-cream { background-color: #1A1D28 !important; }
body.light-mode .bg-bg { background-color: #E8E3D4 !important; }
body.light-mode .bg-surface { background-color: rgba(255,255,255,0.65) !important; }
body.light-mode .text-bg { color: #F2EBD8 !important; }
body.light-mode .border-borderSubtle { border-color: rgba(26,29,40,0.10) !important; }
body.light-mode .bg-borderSubtle { background-color: rgba(26,29,40,0.10) !important; }

/* 3. Tailwind opacity-suffix variants — text-cream/70, bg-cream/10, etc. */
body.light-mode [class*="text-cream/"] { color: rgba(26,29,40,0.78) !important; }
body.light-mode [class*="text-muted/"] { color: rgba(26,29,40,0.50) !important; }
body.light-mode [class*="bg-cream/"] { background-color: rgba(26,29,40,0.06) !important; }
body.light-mode [class*="bg-borderSubtle/"] { background-color: rgba(26,29,40,0.08) !important; }

/* 4. Dimension colour Tailwind classes — these stay legible in both themes (saturated colours work).
   But we keep them explicit in case Tailwind purge ever drops them. */
body.light-mode [class*="text-dimHealth"]     { color: #D0342C !important; }
body.light-mode [class*="text-dimKnowledge"]  { color: #1B4CD8 !important; }
body.light-mode [class*="text-dimProsperity"] { color: #E3A63C !important; }
body.light-mode [class*="text-dimFreedom"]    { color: #7B3FB8 !important; }
body.light-mode [class*="text-dimTradition"]  { color: #D9622B !important; }
body.light-mode [class*="text-dimNature"]     { color: #2D7D46 !important; }
body.light-mode [class*="text-dimSafety"]     { color: #495A70 !important; }
body.light-mode [class*="bg-dimHealth"]     { background-color: #D0342C !important; }
body.light-mode [class*="bg-dimKnowledge"]  { background-color: #1B4CD8 !important; }
body.light-mode [class*="bg-dimProsperity"] { background-color: #E3A63C !important; }
body.light-mode [class*="bg-dimFreedom"]    { background-color: #7B3FB8 !important; }
body.light-mode [class*="bg-dimTradition"]  { background-color: #D9622B !important; }
body.light-mode [class*="bg-dimNature"]     { background-color: #2D7D46 !important; }
body.light-mode [class*="bg-dimSafety"]     { background-color: #495A70 !important; }

/* 5. Adaptive utility classes — use these in new code instead of baked rgba */
.body-copy { color: rgba(242,235,216,0.78); }
body.light-mode .body-copy { color: rgba(26,29,40,0.80); }
.body-muted { color: rgba(242,235,216,0.55); }
body.light-mode .body-muted { color: rgba(26,29,40,0.58); }
.body-strong { color: #F2EBD8; }
body.light-mode .body-strong { color: #1A1D28; }
.body-soft { color: rgba(242,235,216,0.45); }
body.light-mode .body-soft { color: rgba(26,29,40,0.50); }

.surf-glass { background: rgba(10,11,16,0.58); backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1); border: 1px solid rgba(242,235,216,0.08); }
body.light-mode .surf-glass { background: rgba(255,255,255,0.55); border-color: rgba(26,29,40,0.09); }
.surf-strong { background: rgba(10,11,16,0.72); backdrop-filter: blur(22px) saturate(1.1); -webkit-backdrop-filter: blur(22px) saturate(1.1); border: 1px solid rgba(242,235,216,0.08); box-shadow: 0 30px 80px -40px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.04); }
body.light-mode .surf-strong { background: rgba(255,255,255,0.72); border-color: rgba(26,29,40,0.10); box-shadow: 0 30px 80px -40px rgba(26,29,40,0.22), inset 0 1px 0 rgba(255,255,255,0.6); }
.surf-subtle { background: rgba(242,235,216,0.035); border: 1px solid rgba(242,235,216,0.07); }
body.light-mode .surf-subtle { background: rgba(26,29,40,0.04); border-color: rgba(26,29,40,0.08); }