/*
 * Shared MacroPresence theme — CSS custom properties and base styles.
 *
 * This file is the SINGLE SOURCE for the theme. Both index.html (the main app) and
 * apps/events-standalone/index.html <link> it, so a token changed here reaches both.
 * It previously lived inline in index.html; that copy is gone. Do not reintroduce one.
 */

      /* Theme tokens — values are space-separated RGB triplets (for rgb()/<alpha-value>). */
      :root {
        /* Light theme defaults */
        --c-bg-dark: 255 255 255;
        --c-bg-card: 245 245 245;
        --c-bg-card-hover: 235 235 235;
        --c-primary: 0 0 0;
        --c-secondary: 85 85 85;
        --c-accent: 212 212 212;
        --c-surface: 60 70 110;     /* slate-blue tint — visible at low alpha on white */
        --c-border: 30 40 80;       /* darker tint for low-alpha borders */
        --c-dash-bg: 244 246 251;
        --c-dash-card: 255 255 255;
        --c-dash-el: 238 241 248;
        --c-dash-bd: 20 30 60;      /* used with /opacity */
        --c-dash-accent: 79 110 247;
        --c-dash-accent2: 108 132 248;
        --c-dash-t1: 11 16 36;
        --c-dash-t2: 74 88 121;
        --c-dash-t3: 148 160 189;
        --c-dash-grn: 15 204 119;
        --c-dash-amb: 245 158 11;
        --c-dash-red: 244 63 94;
        --c-dash-pur: 168 85 247;
        /* Text-only variants of the four tones above, tuned for AA (>=4.5:1, verified
           >=5:1 with margin) as text on their own bg-{tone}/10 pill against every real
           composited background it renders on (dashBg, dashCard, dashEl/30-over-dashBg):
           worst-case light-mode measured 5.05-5.62:1. Same hue family, darkened only
           enough to clear AA on white — mirrors --c-pur-text's own light/dark split. */
        --c-dash-grn-text: 8 114 67;    /* #087243 */
        --c-dash-amb-text: 137 88 6;    /* #895806 */
        --c-dash-red-text: 193 11 42;   /* #c10b2a */
        --c-dash-pur-text: 133 16 244;  /* #8510f4 */
        /* Purple accent family — light variants tuned for readability on white */
        --c-pur-fill: 124 60 255;   /* #7c3cff */
        --c-pur-bd:   109 49 255;   /* #6d31ff */
        --c-pur-text: 124 60 255;   /* #7c3cff — same hue family as dark #a66bff, darker for white-bg readability */
        --c-pur-surf: 243 237 255;  /* #f3edff */
        --c-pur-surf2: 232 220 255; /* #e8dcff */

        /* Non-token surface vars used in CSS below */
        --glass-bg: rgba(245, 245, 245, 0.55);
        --glass-bd: rgba(0, 0, 0, 0.10);
        --glass-hover-bg: rgba(0, 0, 0, 0.04);
        --glass-hover-bd: rgba(0, 0, 0, 0.18);
        --scrollbar-track: #ffffff;
        --scrollbar-thumb: #bbbbbb;
        --scrollbar-thumb-hover: #888888;
        --leaflet-bg: rgba(255, 255, 255, 0.95);
        --leaflet-bd: rgba(0, 0, 0, 0.12);
        --leaflet-fg: #111111;
        --body-bg: #ffffff;
        --body-fg: #111111;
        --selection-bg: #000000;
        --selection-fg: #ffffff;
        --text-gradient-from: #000000;
        --text-gradient-to: #555555;
        color-scheme: light;
      }

      :root.dark {
        --c-bg-dark: 0 0 0;
        --c-bg-card: 10 10 10;
        --c-bg-card-hover: 17 17 17;
        --c-primary: 255 255 255;
        --c-secondary: 136 136 136;
        --c-accent: 51 51 51;
        --c-surface: 255 255 255;
        --c-border: 255 255 255;
        --c-dash-bg: 9 12 24;
        --c-dash-card: 16 20 42;
        --c-dash-el: 24 29 52;
        --c-dash-bd: 255 255 255;
        --c-dash-accent: 79 110 247;
        --c-dash-accent2: 108 132 248;
        --c-dash-t1: 237 240 255;
        --c-dash-t2: 127 141 171;
        --c-dash-t3: 61 74 102;
        --c-dash-grn: 15 204 119;
        --c-dash-amb: 245 158 11;
        --c-dash-red: 244 63 94;
        --c-dash-pur: 168 85 247;
        /* Text-only variants of the four tones above. In dark mode dashGrn/dashAmb
           already clear AA as text (7.3-8:1) but dashRed (4.54:1) and especially
           dashPur (4.14:1 on the Gateway-inspector card, 4.30:1 on the expanded-row
           overlay) do not, on the real composited badge backgrounds. Lightened only
           enough to clear AA with margin: worst-case dark-mode measured 5.06-5.7:1
           across dashBg/dashCard/dashEl-over-dashBg. */
        --c-dash-grn-text: 13 171 100;  /* #0dab64 */
        --c-dash-amb-text: 206 132 8;   /* #ce8408 */
        --c-dash-red-text: 245 86 113;  /* #f55671 */
        --c-dash-pur-text: 180 109 248; /* #b46df8 */
        /* Purple accent family — original dark-theme values preserved */
        --c-pur-fill: 124 60 255;   /* #7c3cff */
        --c-pur-bd:   109 49 255;   /* #6d31ff */
        --c-pur-text: 166 107 255;  /* #a66bff */
        --c-pur-surf: 33 20 60;     /* #21143c */
        --c-pur-surf2: 76 29 149;   /* #4c1d95 */

        --glass-bg: rgba(10, 10, 10, 0.4);
        --glass-bd: rgba(255, 255, 255, 0.08);
        --glass-hover-bg: rgba(255, 255, 255, 0.03);
        --glass-hover-bd: rgba(255, 255, 255, 0.15);
        --scrollbar-track: #000000;
        --scrollbar-thumb: #333333;
        --scrollbar-thumb-hover: #555555;
        --leaflet-bg: rgba(10, 10, 10, 0.95);
        --leaflet-bd: rgba(255, 255, 255, 0.10);
        --leaflet-fg: #ffffff;
        --body-bg: #000000;
        --body-fg: #ffffff;
        --selection-bg: #ffffff;
        --selection-fg: #000000;
        --text-gradient-from: #ffffff;
        --text-gradient-to: #888888;
        color-scheme: dark;
      }

      body {
        font-family: 'Inter', sans-serif;
        background-color: var(--body-bg);
        color: var(--body-fg);
      }

      ::selection {
        background: var(--selection-bg);
        color: var(--selection-fg);
      }

      html { scroll-behavior: smooth; }

      ::-webkit-scrollbar { width: 6px; height: 6px; }
      ::-webkit-scrollbar-track { background: var(--scrollbar-track); }
      ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
      ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

      .scrollbar-hide::-webkit-scrollbar { display: none; }
      .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

      .text-gradient {
        background: linear-gradient(to right, var(--text-gradient-from), var(--text-gradient-to));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .glass {
        background: var(--glass-bg);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid var(--glass-bd);
      }

      .glass-hover:hover {
        background: var(--glass-hover-bg);
        border-color: var(--glass-hover-bd);
      }

      .nav-logo { height: 32px; width: auto; }
      @media (min-width: 768px) { .nav-logo { height: 40px; } }

      /* Logos ship as pure white SVG — invert on light theme for visibility */
      :root:not(.dark) img[src*="/logos/macropresence"] {
        filter: invert(1);
      }

      /*
       * Light-theme contrast boost for low-alpha primary utilities.
       *
       * In dark mode, `text-primary/30` = rgba(255,255,255,0.3) — readable on near-black.
       * In light mode, the same class = rgba(0,0,0,0.3) — fails WCAG on white.
       * These overrides bump the effective alpha and use a slate tint for surfaces/borders
       * so subtle card boundaries remain visible. Higher specificity than the Tailwind utility.
       */
      :root:not(.dark) .text-primary\/20 { color: rgba(0,0,0,0.45); }
      :root:not(.dark) .text-primary\/25 { color: rgba(0,0,0,0.50); }
      :root:not(.dark) .text-primary\/30 { color: rgba(0,0,0,0.55); }
      :root:not(.dark) .text-primary\/35 { color: rgba(0,0,0,0.58); }
      :root:not(.dark) .text-primary\/40 { color: rgba(0,0,0,0.60); }
      :root:not(.dark) .text-primary\/42 { color: rgba(0,0,0,0.62); }
      :root:not(.dark) .text-primary\/45 { color: rgba(0,0,0,0.62); }
      :root:not(.dark) .text-primary\/50 { color: rgba(0,0,0,0.65); }
      :root:not(.dark) .text-primary\/55 { color: rgba(0,0,0,0.68); }

      :root:not(.dark) .bg-primary\/5            { background-color: rgba(20,25,55,0.05); }
      :root:not(.dark) .bg-primary\/10           { background-color: rgba(20,25,55,0.08); }
      :root:not(.dark) .bg-primary\/15           { background-color: rgba(20,25,55,0.12); }
      :root:not(.dark) .bg-primary\/20           { background-color: rgba(20,25,55,0.16); }
      :root:not(.dark) .bg-primary\/25           { background-color: rgba(20,25,55,0.20); }
      :root:not(.dark) .bg-primary\/\[0\.02\]    { background-color: rgba(20,25,55,0.03); }
      :root:not(.dark) .bg-primary\/\[0\.03\]    { background-color: rgba(20,25,55,0.04); }
      :root:not(.dark) .bg-primary\/\[0\.035\]   { background-color: rgba(20,25,55,0.045); }
      :root:not(.dark) .bg-primary\/\[0\.04\]    { background-color: rgba(20,25,55,0.05); }
      :root:not(.dark) .bg-primary\/\[0\.045\]   { background-color: rgba(20,25,55,0.055); }
      :root:not(.dark) .bg-primary\/\[0\.05\]    { background-color: rgba(20,25,55,0.06); }
      :root:not(.dark) .bg-primary\/\[0\.06\]    { background-color: rgba(20,25,55,0.07); }
      :root:not(.dark) .bg-primary\/\[0\.065\]   { background-color: rgba(20,25,55,0.07); }
      :root:not(.dark) .bg-primary\/\[0\.07\]    { background-color: rgba(20,25,55,0.075); }
      :root:not(.dark) .bg-primary\/\[0\.08\]    { background-color: rgba(20,25,55,0.085); }
      :root:not(.dark) .bg-primary\/\[0\.10\]    { background-color: rgba(20,25,55,0.10); }
      :root:not(.dark) .bg-primary\/\[0\.12\]    { background-color: rgba(20,25,55,0.12); }

      :root:not(.dark) .border-primary\/5         { border-color: rgba(20,25,55,0.10); }
      :root:not(.dark) .border-primary\/10        { border-color: rgba(20,25,55,0.14); }
      :root:not(.dark) .border-primary\/15        { border-color: rgba(20,25,55,0.18); }
      :root:not(.dark) .border-primary\/20        { border-color: rgba(20,25,55,0.22); }
      :root:not(.dark) .border-primary\/25        { border-color: rgba(20,25,55,0.25); }
      :root:not(.dark) .border-primary\/28        { border-color: rgba(20,25,55,0.28); }
      :root:not(.dark) .border-primary\/30        { border-color: rgba(20,25,55,0.30); }
      :root:not(.dark) .border-primary\/35        { border-color: rgba(20,25,55,0.32); }
      :root:not(.dark) .border-primary\/40        { border-color: rgba(20,25,55,0.36); }
      :root:not(.dark) .border-primary\/45        { border-color: rgba(20,25,55,0.40); }
      :root:not(.dark) .border-primary\/\[0\.05\] { border-color: rgba(20,25,55,0.10); }
      :root:not(.dark) .border-primary\/\[0\.06\] { border-color: rgba(20,25,55,0.12); }
      :root:not(.dark) .border-primary\/\[0\.08\] { border-color: rgba(20,25,55,0.14); }
      :root:not(.dark) .border-primary\/\[0\.09\] { border-color: rgba(20,25,55,0.15); }
      :root:not(.dark) .border-primary\/\[0\.1\]  { border-color: rgba(20,25,55,0.16); }
      :root:not(.dark) .border-primary\/\[0\.10\] { border-color: rgba(20,25,55,0.16); }
      :root:not(.dark) .border-primary\/\[0\.12\] { border-color: rgba(20,25,55,0.18); }
      :root:not(.dark) .border-primary\/\[0\.15\] { border-color: rgba(20,25,55,0.22); }

      /*
       * Light-theme contrast fix for fixed-brightness status/semantic text.
       *
       * The dark-first palette uses `text-{red,green,amber,emerald,slate,blue,yellow}-400`
       * (and -300) for status text, stat metrics, muted/empty-state copy, and "Sign Out".
       * Those shades are tuned for the near-black canvas and fail WCAG AA on white
       * (green-400 1.6:1, red-400 2.8:1, slate-400 2.6:1, etc.). No component uses a
       * `dark:` variant, so they never adapt. Remap each to a 600/700 shade that meets AA
       * on white — light mode only; dark mode (the Tailwind default) is untouched. Higher
       * specificity than the base utility, so no !important needed.
       */
      :root:not(.dark) .text-red-400,
      :root:not(.dark) .text-red-300      { color: #dc2626; }  /* red-600  ~4.8:1 */
      :root:not(.dark) .text-green-400,
      :root:not(.dark) .text-green-300    { color: #15803d; }  /* green-700 ~4.9:1 */
      :root:not(.dark) .text-emerald-400,
      :root:not(.dark) .text-emerald-300  { color: #047857; }  /* emerald-700 ~5.0:1 */
      :root:not(.dark) .text-amber-400,
      :root:not(.dark) .text-amber-300    { color: #b45309; }  /* amber-700 ~4.8:1 */
      :root:not(.dark) .text-yellow-400,
      :root:not(.dark) .text-yellow-300   { color: #a16207; }  /* yellow-700 ~4.7:1 */
      :root:not(.dark) .text-blue-400     { color: #1d4ed8; }  /* blue-700  ~6.3:1 */
      :root:not(.dark) .text-slate-400,
      :root:not(.dark) .text-slate-300,
      :root:not(.dark) .text-slate-500    { color: #475569; }  /* slate-600 ~7:1 */
      :root:not(.dark) .text-violet-400,
      :root:not(.dark) .text-purple-400   { color: #6d28d9; }  /* violet-700 ~7:1 */
      :root:not(.dark) .text-indigo-400   { color: #4338ca; }  /* indigo-700 ~6:1 */

      /* Muted meta (slate-500) sits ~4.0:1 on dark cards — just under AA.
         Nudge to slate-400 in dark; still clearly de-emphasised vs white body. */
      :root.dark .text-slate-500          { color: #94a3b8; }  /* slate-400 ~5.9:1 */

      /* Linear-style feed (ClientFeed/feedShared) bespoke hex accents — same
         dark-tuned-on-white problem, but arbitrary-value classes P1's palette
         rules don't cover. Darken for light mode only. */
      :root:not(.dark) .text-lnAccentHover { color: #4f46e5; }  /* indigo-600 ~6:1 */
      :root:not(.dark) .text-lnInkSubtle   { color: #5b5f66; }  /* ink        ~5:1 */
      :root:not(.dark) .text-lnAccent      { color: #4c56b8; }  /* lavender   ~6:1 */

      /*
       * Solid violet/purple button fills carry a `text-primary` label, which
       * flips to black in light mode (black-on-violet ~3.7:1). The label belongs
       * on the always-dark fill, so force it white in light mode. Matches both
       * classes on the same element — covers every inline CTA, auth/onboarding
       * button, and EmptyState action without per-file edits.
       */
      :root:not(.dark) .bg-violet-600.text-primary,
      :root:not(.dark) .bg-violet-700.text-primary,
      :root:not(.dark) .bg-purple-600.text-primary,
      :root:not(.dark) .bg-purple-500.text-primary { color: #ffffff; }

      /*
       * Touch-target sizing (WCAG 2.5.5 / Apple HIG 44px). Scoped to coarse
       * pointers, so the compact desktop density stays pixel-for-pixel identical
       * and only real touch devices get the larger hit areas. Icon-only buttons
       * (the 21x28 / 32x32 offenders) get a full 44x44 box; every button/control
       * gets a 44px min height.
       */
      @media (pointer: coarse) {
        button,
        [role="button"],
        input,
        select,
        textarea { min-height: 44px; }
        /* Icon-only buttons → widen the hit box to 44px. CAUTION: `:only-child`
           ignores text nodes, so `<button><i/>Label</button>` ALSO matches (the <i>
           is the only ELEMENT child). So set ONLY min-width here — a no-op on
           full-width / auto-width buttons — and never override justify-content or
           display, which wrongly centered icon+text nav items on touch. Real
           icon-only buttons center their glyph via their own flex utilities. */
        button:has(> i:only-child),
        [role="button"]:has(> i:only-child) {
          min-width: 44px;
        }
      }

      /* Kill the 300ms mobile tap delay on all interactive elements. */
      button, [role="button"], a, input, select, textarea, label,
      summary, [tabindex] { touch-action: manipulation; }

      /*
       * Placeholder legibility. Components hard-code `placeholder-white/30`
       * (theme-unaware) → ~1:1 on the near-white light-mode field fill. Force a
       * theme-aware placeholder tone that meets AA in both modes. Higher
       * specificity than the utility, so no !important.
       */
      :root:not(.dark) input::placeholder,
      :root:not(.dark) textarea::placeholder { color: rgba(15, 23, 42, 0.62); }
      :root.dark input::placeholder,
      :root.dark textarea::placeholder { color: rgba(255, 255, 255, 0.45); }

      /*
       * Reduced motion (WCAG 2.3.3, mandatory). The app defines infinite CSS
       * keyframes (float / pulseSlow / glow) with no guard. Collapse all looping
       * CSS animation + transitions under an explicit OS preference. NOTE: this
       * cannot stop JS requestAnimationFrame loops — the three.js hero and the two
       * auto-scroll marquees are gated in their components via matchMedia.
       */
      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
          animation-duration: 0.001ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.001ms !important;
          scroll-behavior: auto !important;
        }
      }

      .leaflet-popup-content-wrapper {
        background: var(--leaflet-bg);
        backdrop-filter: blur(10px);
        border: 1px solid var(--leaflet-bd);
        color: var(--leaflet-fg);
        border-radius: 12px;
      }
      .leaflet-popup-tip { background: var(--leaflet-bg); }

      /* Native pickers follow theme via color-scheme on :root */
      input[type="date"],
      input[type="datetime-local"],
      input[type="time"] {
        color-scheme: inherit;
      }

      input[type="number"]::-webkit-inner-spin-button,
      input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
      input[type="number"] { -moz-appearance: textfield; }

      input:focus-visible,
      select:focus-visible,
      textarea:focus-visible,
      button:focus-visible {
        outline: 2px solid rgba(79, 110, 247, 0.5);
        outline-offset: 2px;
      }