/* ═══════════════════════════════════════════════════════════════════════
   StudentBoard Design System  —  flat, token-based
   Inspired by ourtrips.web's ds-* system. Surfaces are FLAT (no glass/blur);
   the accent is driven by the active --accent theme set in head.ejs, so the
   existing 7 accent themes + light/dark mode keep working.

   This file is loaded AFTER styles.css. The "Compatibility layer" re-skins the
   app's existing utility classes (glass-panel, bg-white/5, inline rgba(30,41,59)
   card gradients, sb-dark-bg, headers, nav) onto flat tokens — so the whole app
   converts to the flat look without editing every page.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── 1. TOKENS ─────────────────────────── */
:root {
  /* Surfaces — dark (default) */
  --ds-bg: #0b111d;
  --ds-surface-1: #141c2c;
  --ds-surface-2: #1c2638;
  --ds-surface-raised: #243049;
  --ds-border: rgba(255, 255, 255, 0.08);
  --ds-border-strong: rgba(255, 255, 255, 0.15);

  /* Text tiers — text-3 must stay ≥4.5:1 (WCAG AA) on surface-1/2; it backs
     every text-slate-500/600 utility including tiny 10px labels. */
  --ds-text: #e9eef7;
  --ds-text-2: #94a3b8;
  --ds-text-3: #8494ab;

  /* Accent — inherits the active theme's --accent (defined in head.ejs) */
  --ds-accent: var(--accent, #22d3ee);
  --ds-accent-secondary: var(--accent-secondary, #6366f1);
  --ds-accent-ink: #04121a;
  --ds-accent-soft: var(--accent-soft, rgba(34, 211, 238, 0.14));
  --ds-accent-border: var(--accent-border, rgba(34, 211, 238, 0.28));

  /* Status */
  --ds-here: #10b981;
  --ds-visited: #3b82f6;
  --ds-warn: #f59e0b;
  --ds-danger: #f87171;
  --ds-danger-soft: rgba(248, 113, 113, 0.14);

  /* Radius scale */
  --ds-r-sm: 8px;
  --ds-r-md: 12px;
  --ds-r-lg: 16px;
  --ds-r-xl: 20px;
  --ds-r-pill: 999px;

  /* Elevation */
  --ds-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  --ds-card-shadow: none;
}

/* Surfaces — light mode (flips every legacy utility routed through tokens) */
[data-mode="light"] {
  --ds-bg: #f3f5fa;
  --ds-surface-1: #ffffff;
  --ds-surface-2: #f1f5f9;
  --ds-surface-raised: #ffffff;
  --ds-border: rgba(15, 23, 42, 0.10);
  --ds-border-strong: rgba(15, 23, 42, 0.18);

  --ds-text: #0f172a;
  --ds-text-2: #475569;
  --ds-text-3: #5b6b82;

  --ds-accent-ink: #ffffff;

  --ds-card-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 14px rgba(16, 24, 40, 0.06);
  --ds-shadow: 0 8px 24px rgba(16, 24, 40, 0.10);
}

/* ───────────────────── 2. PAGE BACKGROUND (flat) ──────────────────── */
html { background: var(--ds-bg); }

/* Prevent horizontal scroll/bleed on mobile (common cross-platform bug). */
html, body { max-width: 100%; overflow-x: clip; }

body { background: var(--ds-bg); color: var(--ds-text); }

/* Flatten the themed gradient backgrounds to a single solid surface. */
.sb-dark-bg,
.sb-light-bg,
[class*="sb-"][class*="-bg"] {
  background: var(--ds-bg) !important;
  color: var(--ds-text);
}

/* ───────────────── 3. COMPATIBILITY LAYER (global re-skin) ───────────
   Re-skins existing markup. Uses !important to win over Tailwind utilities
   and non-important inline styles. */

/* Brand icon: logo.svg is a full self-contained mark (own rounded board +
   gradient glyph). Headers historically whitewashed it (brightness-0 invert)
   inside an accent-gradient tile — strip both so the real icon shows. */
img[src="/icons/logo.svg"] { filter: none !important; }
[style*="var(--accent), var(--accent-secondary)"]:has(> img[src="/icons/logo.svg"]) {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Glass panels → flat cards */
.glass-panel,
.glass-panel-light {
  background: var(--ds-surface-1) !important;
  border: 1px solid var(--ds-border) !important;
  box-shadow: var(--ds-card-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Inline card gradients (linear-gradient(..., rgba(30,41,59...))) → flat surface.
   25 occurrences across the app use this exact dark card gradient. */
[style*="rgba(30, 41, 59"],
[style*="rgba(15, 23, 42"] {
  background: var(--ds-surface-1) !important;
}

/* Kill glass blur everywhere in flat mode */
[class*="backdrop-blur"] {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Translucent white fills → flat surfaces */
.bg-white\/5,
.bg-white\/\[0\.03\],
.bg-white\/\[0\.04\] { background-color: var(--ds-surface-1) !important; }

.bg-white\/10,
.bg-white\/\[0\.05\],
.bg-white\/\[0\.06\],
.bg-white\/15 { background-color: var(--ds-surface-2) !important; }

/* Translucent white borders → token border */
.border-white\/5,
.border-white\/10,
.border-white\/15,
.border-white\/20,
.border-white\/\[0\.05\],
.border-white\/\[0\.06\] { border-color: var(--ds-border) !important; }

/* Hover/active surface feedback */
.hover\:bg-white\/10:hover,
.hover\:bg-white\/5:hover { background-color: var(--ds-surface-2) !important; }
.active\:bg-white\/20:active,
.active\:bg-white\/10:active { background-color: var(--ds-surface-raised) !important; }

/* Neutral text → token text tiers (works in BOTH modes, replaces the
   old light-mode !important text hacks) */
.text-white,
.text-slate-50,
.text-slate-100 { color: var(--ds-text) !important; }
.text-slate-200,
.text-slate-300 { color: var(--ds-text); }
.text-slate-400 { color: var(--ds-text-2) !important; }
.text-slate-500,
.text-slate-600 { color: var(--ds-text-3) !important; }

/* ── Keep light-on-color text legible on accent/colored buttons, badges and
      gradients — the neutral remap above must NOT turn white button text dark. */
:is(.cta-gradient,
    [class*="bg-gradient-to-"],
    [class*="bg-violet-5"], [class*="bg-violet-6"], [class*="bg-purple-5"], [class*="bg-purple-6"],
    [class*="bg-fuchsia-5"], [class*="bg-emerald-5"], [class*="bg-emerald-6"],
    [class*="bg-blue-5"], [class*="bg-blue-6"], [class*="bg-sky-5"], [class*="bg-rose-5"], [class*="bg-cyan-5"]).text-white {
  color: #fff !important;
}
[class*="bg-gradient-to-"] .text-white { color: #fff !important; }

/* ── .cta-gradient is the exception to the rule above: its gradient is a PALE
      pastel (--cta-from/--cta-to sit around 0.95 alpha of a light tint), so it
      takes dark ink, not white. Four templates pair it with .text-white, and
      white-on-pastel measures ~1.5:1 — effectively invisible.

      This must be !important and must come after both the block above and the
      .text-white neutral remap: without it .text-white wins and paints
      --ds-text, which in dark mode is #e9eef7 and lands at 1.40:1 — worse.
      #05070d clears AA on both gradient stops in all six themes and both
      modes (worst case rose --cta-to, 5.76:1). */
.cta-gradient,
.cta-gradient.text-white,
.cta-gradient .text-white { color: #05070d !important; }

/* ── Light mode: darken saturated text so colored pills/labels/subtitles stay
      readable on light surfaces. Substring match catches opacity variants too
      (e.g. text-emerald-200/70). */
[data-mode="light"] :is([class*="text-cyan-100"], [class*="text-cyan-200"], [class*="text-cyan-300"]) { color: #0e7490 !important; }
[data-mode="light"] :is([class*="text-emerald-100"], [class*="text-emerald-200"], [class*="text-emerald-300"]) { color: #047857 !important; }
[data-mode="light"] :is([class*="text-blue-100"], [class*="text-blue-200"], [class*="text-blue-300"]) { color: #1d4ed8 !important; }
[data-mode="light"] :is([class*="text-violet-100"], [class*="text-violet-200"], [class*="text-violet-300"]) { color: #6d28d9 !important; }
[data-mode="light"] :is([class*="text-amber-100"], [class*="text-amber-200"], [class*="text-amber-300"]) { color: #b45309 !important; }
[data-mode="light"] :is([class*="text-rose-100"], [class*="text-rose-200"], [class*="text-rose-300"]) { color: #be123c !important; }
[data-mode="light"] :is([class*="text-red-100"], [class*="text-red-200"], [class*="text-red-300"]) { color: #dc2626 !important; }
[data-mode="light"] :is([class*="text-sky-100"], [class*="text-sky-200"], [class*="text-sky-300"]) { color: #0369a1 !important; }
[data-mode="light"] :is([class*="text-fuchsia-200"], [class*="text-fuchsia-300"]) { color: #a21caf !important; }
[data-mode="light"] :is([class*="text-pink-200"], [class*="text-pink-300"]) { color: #be185d !important; }
[data-mode="light"] :is([class*="text-indigo-200"], [class*="text-indigo-300"]) { color: #4338ca !important; }

/* 400/500 shades (icon tiles, pills) sit at ~2:1 on white — same treatment.
   600s are skipped where they already pass AA on white. */
[data-mode="light"] :is([class*="text-cyan-400"], [class*="text-cyan-500"]) { color: #0e7490 !important; }
[data-mode="light"] :is([class*="text-emerald-400"], [class*="text-emerald-500"]) { color: #047857 !important; }
[data-mode="light"] :is([class*="text-blue-400"], [class*="text-blue-500"]) { color: #1d4ed8 !important; }
[data-mode="light"] :is([class*="text-violet-400"], [class*="text-violet-500"]) { color: #6d28d9 !important; }
[data-mode="light"] :is([class*="text-amber-400"], [class*="text-amber-500"]) { color: #b45309 !important; }
[data-mode="light"] :is([class*="text-rose-400"], [class*="text-rose-500"]) { color: #be123c !important; }
[data-mode="light"] :is([class*="text-red-400"], [class*="text-red-500"]) { color: #dc2626 !important; }
[data-mode="light"] :is([class*="text-fuchsia-400"], [class*="text-fuchsia-500"]) { color: #a21caf !important; }
[data-mode="light"] :is([class*="text-pink-400"], [class*="text-pink-500"]) { color: #be185d !important; }
[data-mode="light"] :is([class*="text-indigo-400"], [class*="text-indigo-500"]) { color: #4338ca !important; }
[data-mode="light"] :is([class*="text-sky-400"], [class*="text-sky-500"]) { color: #0369a1 !important; }
[data-mode="light"] :is([class*="text-orange-400"], [class*="text-orange-500"]) { color: #c2410c !important; }

/* ── Accent text on an accent-soft fill (the app's standard pill) ──────────
   23 elements across 16 templates pair .text-[var(--accent)] with
   .bg-[var(--accent-soft)]. Tinting text with the same hue as its own backdrop
   is inherently low-contrast, and measured across 6 themes x light/dark it
   falls under AA 4.5 for the small text these pills use:
     light: sunset 4.01 (page) / 4.35 (card), aurora 4.18, emerald 4.27
     dark:  rose 4.02, with midnight 4.54 on the edge

   Every theme already defines --accent-text-muted, and it moves the right way
   in each mode — darker in light (sunset #c2410c -> #9a3412), lighter in dark
   (rose #f43f5e -> #fb7185). So one rule serves both. Reused rather than
   inventing colours, and applied ONLY to this pairing rather than darkening
   --accent globally, which would restyle accent icons, headings and borders
   that already pass.

   Worst case after this rule: 5.48 (dark/rose), 6.14 (light/sunset).

   Accent text on the page or a plain card is untouched and keeps --accent. The
   descendant form covers pills that put the fill on a wrapper and the colour on
   a child. */
.text-\[var\(--accent\)\].bg-\[var\(--accent-soft\)\],
.bg-\[var\(--accent-soft\)\] .text-\[var\(--accent\)\] {
  color: var(--accent-text-muted, var(--accent)) !important;
}

/* Same pairing on the file-picker button (timeline/activity-detail.ejs:213).
   ::file-selector-button is a separate compiled selector, so the rule above
   cannot reach it. */
.file\:text-\[var\(--accent\)\]::file-selector-button {
  color: var(--accent-text-muted, var(--accent)) !important;
}
[data-mode="light"] :is([class*="text-teal-400"], [class*="text-teal-500"]) { color: #0f766e !important; }
[data-mode="light"] :is([class*="text-lime-400"], [class*="text-lime-500"]) { color: #4d7c0f !important; }
[data-mode="light"] :is([class*="text-yellow-400"], [class*="text-yellow-500"]) { color: #a16207 !important; }

/* Accent icon tiles (size-12/14 rounded squares with the cyan→indigo 20%
   gradient). The §3b theme remap would swap the gradient stops to FULL-opacity
   accent — a solid blob with an accent icon on it (invisible). Flatten to the
   soft accent tint instead; wins over §3b via source order + specificity. */
.from-cyan-400\/20.to-indigo-500\/20 {
  background-image: none !important;
  background-color: var(--accent-soft) !important;
  box-shadow: none !important;
}

/* Restore white text on colored buttons AFTER the light-mode darkening above. */
[data-mode="light"] [class*="bg-gradient-to-"] .text-white,
[data-mode="light"] [class*="bg-gradient-to-"].text-white { color: #fff !important; }

/* Light mode: flatten dark colored feature-card gradients (home Activities /
   Library / Referrals cards) so their text stays readable on a light surface. */
[data-mode="light"] :is([class*="from-emerald-900"], [class*="from-blue-900"], [class*="from-violet-500/20"]) {
  background-image: none !important;
  background-color: var(--ds-surface-1) !important;
}
/* …and their white text must go dark (overrides the colored-button white-text
   protection above, which would otherwise leave white-on-white). */
[data-mode="light"] :is([class*="from-emerald-900"], [class*="from-blue-900"], [class*="from-violet-500/20"]) .text-white {
  color: var(--ds-text) !important;
}

/* ─────────── 3b. ACCENT THEMING (route cyan/indigo → active accent) ───────────
   For non-default themes, remap the app's cyan (accent) and indigo (secondary)
   utilities to the active theme accent. Substring match covers every shade +
   opacity variant; :not([class*="-900"]) protects the dark feature-card
   gradients. Functional colors (emerald/amber/red/rose/violet) are untouched.
   Accent *text* is remapped in dark only — light mode keeps the darkened,
   higher-contrast colors from section 3. */

/* Soft backgrounds + gradient/ring/shadow CSS vars — substring is safe here
   because setting a var/soft-fill unconditionally doesn't break state variants. */
:is([data-theme="midnight"],[data-theme="sunset"],[data-theme="emerald"],[data-theme="rose"],[data-theme="ocean"]) [class*="bg-cyan-"]:not([class*="-900"]) { background-color: var(--accent-soft) !important; }
:is([data-theme="midnight"],[data-theme="sunset"],[data-theme="emerald"],[data-theme="rose"],[data-theme="ocean"]) [class*="bg-indigo-"]:not([class*="-900"]) { background-color: var(--accent-soft2) !important; }
:is([data-theme="midnight"],[data-theme="sunset"],[data-theme="emerald"],[data-theme="rose"],[data-theme="ocean"]) [class*="from-cyan-"]:not([class*="-900"]) { --tw-gradient-from: var(--accent) !important; }
:is([data-theme="midnight"],[data-theme="sunset"],[data-theme="emerald"],[data-theme="rose"],[data-theme="ocean"]) [class*="to-cyan-"]:not([class*="-900"]) { --tw-gradient-to: var(--accent) !important; }
:is([data-theme="midnight"],[data-theme="sunset"],[data-theme="emerald"],[data-theme="rose"],[data-theme="ocean"]) [class*="from-indigo-"]:not([class*="-900"]) { --tw-gradient-from: var(--accent-secondary) !important; }
:is([data-theme="midnight"],[data-theme="sunset"],[data-theme="emerald"],[data-theme="rose"],[data-theme="ocean"]) [class*="to-indigo-"]:not([class*="-900"]) { --tw-gradient-to: var(--accent-secondary) !important; }
:is([data-theme="midnight"],[data-theme="sunset"],[data-theme="emerald"],[data-theme="rose"],[data-theme="ocean"]) [class*="ring-cyan-"] { --tw-ring-color: var(--accent-border) !important; }
:is([data-theme="midnight"],[data-theme="sunset"],[data-theme="emerald"],[data-theme="rose"],[data-theme="ocean"]) [class*="shadow-cyan-"] { --tw-shadow-color: var(--accent-glow) !important; }

/* Borders — EXACT base classes only, so we never hijack focus:/hover: state
   variants (e.g. focus:border-cyan-400/30 stays focus-only). */
:is([data-theme="midnight"],[data-theme="sunset"],[data-theme="emerald"],[data-theme="rose"],[data-theme="ocean"]) :is(.border-cyan-300\/15,.border-cyan-300\/20,.border-cyan-300\/25,.border-cyan-400\/20,.border-cyan-400\/30,.border-cyan-400\/40,.border-cyan-500\/20,.border-cyan-500\/30,.border-indigo-400\/30,.border-indigo-500\/20,.border-indigo-500\/30) { border-color: var(--accent-border) !important; }

/* Focus-state accent (only on :focus) — themed input rings/borders. */
:is([data-theme="midnight"],[data-theme="sunset"],[data-theme="emerald"],[data-theme="rose"],[data-theme="ocean"]) .focus\:border-cyan-400\/30:focus { border-color: var(--accent-border) !important; }

/* Accent text — dark mode only (light keeps the darkened readable colors),
   exact base classes only. */
:is([data-theme="midnight"],[data-theme="sunset"],[data-theme="emerald"],[data-theme="rose"],[data-theme="ocean"]):not([data-mode="light"]) :is(.text-cyan-100,.text-cyan-100\/70,.text-cyan-200,.text-cyan-300,.text-cyan-400) { color: var(--accent) !important; }
:is([data-theme="midnight"],[data-theme="sunset"],[data-theme="emerald"],[data-theme="rose"],[data-theme="ocean"]):not([data-mode="light"]) :is(.text-indigo-200,.text-indigo-300,.text-indigo-400) { color: var(--accent-secondary) !important; }

/* ─────────────── 4. APP CHROME: header + bottom nav ─────────────── */
/* Top bars: flat surface, solid, hugs the safe-area/notch. */
header.sticky,
header[class*="top-0"] {
  background: var(--ds-surface-1) !important;
  border-bottom: 1px solid var(--ds-border) !important;
  box-shadow: none !important;
  padding-top: env(safe-area-inset-top);
}

/* Bottom nav: flat surface + home-indicator safe area. */
nav.fixed.bottom-0 {
  background: var(--ds-surface-1) !important;
  border-top: 1px solid var(--ds-border) !important;
  box-shadow: var(--ds-card-shadow) !important;
}

/* Install banner / floating sheets → flat */
#sb-install-banner { background: var(--ds-surface-raised) !important; }

/* ──────────────────── 5. COMPONENT CLASSES ──────────────────── */
.ds-card {
  background: var(--ds-surface-1);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-xl);
  padding: 1rem 1.25rem;
  box-shadow: var(--ds-card-shadow);
}

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  min-height: 44px;          /* iOS/Android touch target */
  padding: 0 18px;
  border-radius: var(--ds-r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
}
.ds-btn:active { transform: scale(0.98); }
.ds-btn-primary { background: var(--ds-accent); color: var(--ds-accent-ink); }
.ds-btn-secondary { background: transparent; border-color: var(--ds-border-strong); color: var(--ds-text); }
.ds-btn-secondary:hover { background: var(--ds-surface-2); }
.ds-btn-ghost { background: var(--ds-surface-2); color: var(--ds-text-2); }
.ds-btn-danger { background: var(--ds-danger-soft); color: var(--ds-danger); }

.ds-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--ds-r-pill);
  border: 1px solid var(--ds-border);
  color: var(--ds-text-2);
}

.ds-input,
.ds-select,
.ds-textarea {
  width: 100%;
  background: var(--ds-surface-2);
  color: var(--ds-text);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-md);
  padding: 12px 14px;
  font-size: 16px;           /* 16px — never trigger iOS zoom-on-focus */
}
.ds-input::placeholder,
.ds-textarea::placeholder { color: var(--ds-text-3); }
.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus {
  outline: none;
  border-color: var(--ds-accent-border);
  box-shadow: 0 0 0 3px var(--ds-accent-soft);
}

/* ─────────────── 6. MOBILE / CROSS-PLATFORM HARDENING ─────────────── */

/* Prevent iOS zoom-on-focus for ALL form controls (we allow pinch-zoom now). */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea { font-size: 16px; }

/* iOS momentum scrolling + crisp text */
body {
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
  text-rendering: optimizeLegibility;
}

/* Comfortable tap targets for icon-only controls */
button, a[role="button"], .tap-target {
  -webkit-tap-highlight-color: transparent;
}

/* Full dynamic viewport height helper (handles mobile URL bar + keyboard) */
.min-h-dvh { min-height: 100vh; min-height: 100dvh; }
.h-dvh { height: 100vh; height: 100dvh; }

/* Safe-area helpers (use on fixed/sticky bars) */
.pt-safe { padding-top: env(safe-area-inset-top); }
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }
.px-safe { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

/* Respect reduced-motion (accessibility on both platforms) */
@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;
  }
}

/* ─────────────── 7. MODERN WEB STANDARDS / UP-TO-DATE ─────────────── */

/* Native UI (scrollbars, form controls, autofill, spinners) follows the theme. */
:root { color-scheme: dark; }
[data-mode="light"] { color-scheme: light; }

/* Prevent iOS text auto-inflation on orientation change. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* In-page anchors clear the sticky header. */
html { scroll-padding-top: 5rem; }

/* Theme the native accent of checkboxes, radios, range and progress. */
:root { accent-color: var(--ds-accent); }

/* Remove the 300ms tap delay / double-tap zoom on interactive controls. */
a, button, [role="button"], input, select, textarea, label, summary,
.ds-btn { touch-action: manipulation; }

/* Keyboard focus is visible and on-brand; pointer focus stays clean. */
:focus-visible {
  outline: 2px solid var(--ds-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* Modern typography: balanced headings, no paragraph orphans (progressive). */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Subtle, themed scrollbars (Firefox + WebKit/Blink). */
* { scrollbar-width: thin; scrollbar-color: var(--ds-border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ds-border-strong);
  border-radius: var(--ds-r-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}

/* Honor higher-contrast preference by strengthening borders. */
@media (prefers-contrast: more) {
  :root { --ds-border: rgba(255, 255, 255, 0.22); }
  [data-mode="light"] { --ds-border: rgba(15, 23, 42, 0.28); }
}