/* SMAU FILE
 * Path: css/smau-theme.css
 * Owns:
 *   - Global design tokens only (colors, fonts, radii, shadows, spacing, blur levels, creator-facing knobs)
 *   - Global z-index bands (canonical layering constants consumed by chrome/surfaces/overlays)
 * Invariants:
 *   - Tokens only: no layout, no mechanics, no component styling.
 *   - All selectors are limited to :root and per-phone token override roots.
 *   - Default theme is DARK regardless of system scheme; light theme is opt-in via explicit flags.
 *   - No legacy token bridges/aliases are defined in this file.
 * DOM Roots:
 *   - :root
 *   - [data-phone]
 * Touches:
 *   - Selectors: :root | [data-phone] (token overrides only)
 *   - Tokens: --smau-* | --os-* | --phone-w | --phone-h | --z-* | --blur-* | --focus-ring-*
 * Exports:
 *   - Tokens: --smau-font-* | --smau-radius-* | --smau-space-* | --smau-edge-gutter | --tap-target-min
 *            | --phone-w | --phone-h | --os-* | --os-accent-rgb | --smau-color-* | --smau-shadow-*
 *            | --smau-edge-hint-* | --blur-* | --focus-ring-* | --smau-glass-opacity | --smau-surface-noise
 *            | --smau-type-scale | --smau-stage-* | --smau-lock-* | --smau-notify-*
 * Depends:
 *   - Tokens: (none)
 * Truth Writes:
 *   - none (CSS tokens only; does not author mechanics truth)
 * Allowed:
 *   - tokenization via CSS vars without appearance change
 *   - add missing tokens with sane defaults
 * No:
 *   - layout/mechanics/component styling
 *   - legacy bridges/aliases (no old-var -> new-var mapping)
 * Rules:
 *   - Rule 1: If it belongs elsewhere, emit SMAU TODO (don’t implement here).
 *   - Rule 2: Do not truncate. Always output full files.
 *   - Rule 3: Only write selectors under DOM Roots. Outside requires SMAU TODO.
 */

:root {
  /* Typography */
  --smau-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --smau-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Phone sizing tokens (chrome/renderer may read these) */
  --phone-w: 390px;
  --phone-h: 820px;

  /* Radii (canonical) */
  --smau-radius-phone: 34px;
  --smau-radius-card: 18px;
  --smau-radius-chip: 14px;
  --smau-radius-pill: 999px;

  /* Spacing primitives (canonical) */
  --smau-space-2: 2px;
  --smau-space-4: 4px;
  --smau-space-6: 6px;
  --smau-space-8: 8px;
  --smau-space-10: 10px;
  --smau-space-12: 12px;
  --smau-space-14: 14px;
  --smau-space-16: 16px;
  --smau-space-18: 18px;
  --smau-space-20: 20px;
  --smau-space-24: 24px;
  --smau-space-28: 28px;

  /* Immersive gutter (canonical) */
  --smau-edge-gutter: 0px;

  /* Hit targets */
  --tap-target-min: 44px;

  /* -------------------------------------------------------------------------
   * Z-INDEX BANDS (CANONICAL)
   * ------------------------------------------------------------------------- */
  --z-base: 0;
  --z-screens: 10;
  --z-chrome: 50;
  --z-statusbar: 60;
  --z-edge-hint: 80;
  --z-qs: 120;
  --z-overlay-root: 160;
  --z-notify-backdrop: 180;
  --z-modal: 200;
  --z-tray: 220;
  --z-notify-banner: 220;
  --z-toast-stack: 240;
  --z-system: 260;
  --z-debug: 999;

  /* -------------------------------------------------------------------------
   * DEFAULT THEME (DARK, ALWAYS)
   * System light does NOT override this.
   * ------------------------------------------------------------------------- */

  /* Motion (global; consumed by overlays/notifications/etc) */
  --smau-dur-ui: 0.18s;
  --smau-dur-layer: 0.24s;
  --smau-ease-out: ease;
  --smau-ease-io: ease;

  /* Stage behind phone (page background) */
  --smau-stage-bg-solid: #04050a;
  --smau-stage-bg:
    radial-gradient(1200px 800px at 50% 20%, rgba(90, 140, 255, 0.12), rgba(0, 0, 0, 0) 55%),
    radial-gradient(900px 600px at 15% 85%, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0) 60%),
    radial-gradient(900px 600px at 85% 85%, rgba(120, 255, 220, 0.05), rgba(0, 0, 0, 0) 60%),
    linear-gradient(180deg, #060713, #04050a 55%, #020308);

  /* Core palette (dark) */
  --os-bg: #05060a;
  --os-bg-grad: radial-gradient(circle at top, #151a2a, #05060a 60%);

  --os-card: rgba(16, 18, 27, 0.92);
  --os-panel: rgba(7, 10, 24, 0.94);
  --os-panel-2: rgba(5, 6, 16, 0.78);
  --os-soft: rgba(22, 24, 36, 0.92);

  --os-ink: rgba(245, 245, 248, 0.92);
  --os-muted: rgba(245, 245, 248, 0.62);
  --os-dim: rgba(245, 245, 248, 0.42);

  --os-border: rgba(255, 255, 255, 0.10);
  --os-border-strong: rgba(255, 255, 255, 0.18);

  --os-accent: #4f8cff;
  --os-accent-2: #7fc3ff;
  --os-accent-soft: rgba(79, 140, 255, 0.18);
  --os-accent-rgb: 79 140 255;

  --os-good: #3fd28b;
  --os-warn: #ffcc66;
  --os-bad: #ff4f6b;

  --os-danger: #ef4444;
  --os-success: #22c55e;
  --os-info: #38bdf8;

  /* Edge hint (canonical) */
  --smau-edge-hint-w: 44px;
  --smau-edge-hint-opacity: 0.55;
  --smau-edge-hint-color: var(--os-accent, #4f8cff);
  --smau-edge-hint-rgb: var(--os-accent-rgb, 79 140 255);

  /* SMAU color aliases (canonical namespace) */
  --smau-color-bg-solid: var(--os-bg);
  --smau-color-bg: var(--os-bg-grad, var(--smau-color-bg-solid));

  --smau-color-surface: var(--os-card);
  --smau-color-panel: var(--os-panel);
  --smau-color-panel-2: var(--os-panel-2);
  --smau-color-soft: var(--os-soft);

  --smau-color-ink: var(--os-ink);
  --smau-color-muted: var(--os-muted);
  --smau-color-dim: var(--os-dim);

  --smau-color-border: var(--os-border);
  --smau-color-border-strong: var(--os-border-strong);

  --smau-color-accent: var(--os-accent);
  --smau-color-accent-2: var(--os-accent-2);
  --smau-color-accent-soft: var(--os-accent-soft);

  --smau-color-good: var(--os-good);
  --smau-color-warn: var(--os-warn);
  --smau-color-bad: var(--os-bad);

  --smau-color-danger: var(--os-danger);
  --smau-color-success: var(--os-success);
  --smau-color-info: var(--os-info);

  /* Shadows / glass (canonical namespace) */
  --smau-shadow-phone: 0 28px 80px rgba(0, 0, 0, 0.78);
  --smau-shadow-card: 0 12px 28px rgba(0, 0, 0, 0.60);
  --smau-shadow-float: 0 18px 46px rgba(0, 0, 0, 0.50);

  /* Blur levels (shared knobs) */
  --smau-edge-hint-blur: 14px;
  --blur-recents: 18px;
  --blur-call: 14px;
  --blur-scrim: 10px;

  /* Focus tokens */
  --focus-ring-color: rgba(79, 140, 255, 0.90);
  --focus-ring-soft: rgba(79, 140, 255, 0.22);
  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;

  /* -------------------------------------------------------------------------
   * NOTIFICATIONS THEME TOKENS (canonical)
   * These back the tokenization inside css/smau-notifications.css
   * ------------------------------------------------------------------------- */

  /* Dot */
  --smau-notify-dot-ring: rgba(2, 6, 23, 0.85);
  --smau-notify-dot-glow: rgba(255, 79, 107, 0.55);

  /* Backdrop scrim */
  --smau-notify-backdrop-bg: rgba(0, 0, 0, 0.45);
  --smau-notify-backdrop-blur: 6px;

  /* Tray sheet */
  --smau-notify-sheet-bg: linear-gradient(180deg, rgba(17, 24, 39, 0.98), rgba(17, 24, 39, 0.96));
  --smau-notify-sheet-blur: 20px;
  --smau-notify-sheet-radius: 20px;
  --smau-notify-sheet-pad: 12px;

  /* Toast */
  --smau-notify-toast-radius: 18px;
  --smau-notify-toast-pad: 12px 14px;
  --smau-notify-toast-bg: rgba(15, 23, 42, 0.76);
  --smau-notify-toast-border: rgba(148, 163, 184, 0.22);
  --smau-notify-toast-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
  --smau-notify-toast-blur: 10px;
  --smau-notify-toast-app: rgba(148, 163, 184, 0.92);
  --smau-notify-toast-title: rgba(241, 245, 249, 0.98);
  --smau-notify-toast-text: rgba(226, 232, 240, 0.88);

  /* Empty state */
  --smau-notify-empty-bg: rgba(15, 23, 42, 0.35);
  --smau-notify-empty-border: rgba(148, 163, 184, 0.14);
  --smau-notify-empty-text: rgba(226, 232, 240, 0.75);

  /* Group header */
  --smau-notify-group-pad: 10px 12px;
  --smau-notify-group-bg: rgba(15, 23, 42, 0.38);
  --smau-notify-group-border: rgba(148, 163, 184, 0.14);
  --smau-notify-group-ink: rgba(241, 245, 249, 0.92);
  --smau-notify-group-bg-active: rgba(15, 23, 42, 0.48);
  --smau-notify-group-border-active: rgba(148, 163, 184, 0.18);
  --smau-notify-group-title: rgba(226, 232, 240, 0.88);
  --smau-notify-group-caret: rgba(226, 232, 240, 0.65);
  --smau-notify-group-pill-bg: rgba(5, 6, 12, 0.60);
  --smau-notify-group-pill-border: rgba(148, 163, 184, 0.18);
  --smau-notify-group-pill-text: rgba(241, 245, 249, 0.92);

  /* Focus ring (notifications surfaces) */
  --smau-notify-focus-ring: 2px solid rgba(241, 245, 249, 0.38);

  /* Rows */
  --smau-notify-row-radius-sm: 14px;
  --smau-notify-row-radius-md: 16px;
  --smau-notify-row-radius-lg: 18px;

  --smau-notify-row-pad: 12px 14px;
  --smau-notify-row-bg: rgba(15, 23, 42, 0.58);
  --smau-notify-row-border: rgba(148, 163, 184, 0.18);
  --smau-notify-row-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  --smau-notify-row-blur: 10px;

  --smau-notify-row-ink: rgba(241, 245, 249, 0.96);
  --smau-notify-row-app: rgba(148, 163, 184, 0.90);
  --smau-notify-row-title: rgba(241, 245, 249, 0.98);
  --smau-notify-row-text: rgba(226, 232, 240, 0.86);

  --smau-notify-row-bg-active: rgba(15, 23, 42, 0.70);
  --smau-notify-row-border-active: rgba(148, 163, 184, 0.26);

  --smau-notify-row-bg-system: rgba(15, 23, 42, 0.52);
  --smau-notify-row-border-system: rgba(148, 163, 184, 0.14);

  --smau-notify-row-pill-bg: rgba(5, 6, 12, 0.65);
  --smau-notify-row-pill-border: rgba(148, 163, 184, 0.22);
  --smau-notify-row-pill-text: rgba(241, 245, 249, 0.92);

  --smau-notify-row-inset: rgba(148, 163, 184, 0.06);

  /* Full mode row overrides */
  --smau-notify-row-pad-full: 14px 16px;
  --smau-notify-row-radius-full: 20px;
  --smau-notify-row-bg-full: rgba(15, 23, 42, 0.64);
  --smau-notify-row-border-full: rgba(148, 163, 184, 0.22);
  --smau-notify-row-text-full: rgba(226, 232, 240, 0.90);

  /* Swipe-to-clear reveal */
  --smau-notify-clear-text: rgba(241, 245, 249, 0.92);
  --smau-notify-clear-bg: linear-gradient(90deg, rgba(239, 68, 68, 0.42), rgba(239, 68, 68, 0.18));
  --smau-notify-clear-bg-reverse: linear-gradient(270deg, rgba(239, 68, 68, 0.42), rgba(239, 68, 68, 0.18));

  /* Lock preview (notifications module) */
  --smau-notify-lock-ink: rgba(255, 255, 255, 0.80);
  --smau-notify-lock-ink-strong: rgba(255, 255, 255, 0.90);
  --smau-notify-lock-app: rgba(255, 255, 255, 0.55);
  --smau-notify-lock-text: rgba(255, 255, 255, 0.90);

  --smau-notify-lock-radius: 18px;
  --smau-notify-lock-pad: 12px 14px;
  --smau-notify-lock-bg: rgba(15, 23, 42, 0.62);
  --smau-notify-lock-bg-strong: rgba(15, 23, 42, 0.70);
  --smau-notify-lock-border: rgba(148, 163, 184, 0.18);
  --smau-notify-lock-border-strong: rgba(148, 163, 184, 0.26);
  --smau-notify-lock-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --smau-notify-lock-blur: 10px;

  /* In-app banner */
  --smau-notify-inapp-radius: 16px;
  --smau-notify-inapp-pad: 12px 14px;
  --smau-notify-inapp-bg: linear-gradient(135deg, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.96) 100%);
  --smau-notify-inapp-border: rgba(71, 85, 105, 0.35);
  --smau-notify-inapp-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
  --smau-notify-inapp-app: rgba(148, 163, 184, 0.95);
  --smau-notify-inapp-title: rgba(241, 245, 249, 0.98);
  --smau-notify-inapp-text: rgba(203, 213, 225, 0.95);

  /* -------------------------------------------------------------------------
   * LOCK THEME TOKENS (canonical)
   * ------------------------------------------------------------------------- */

  /* Lock wallpaper */
  --smau-lock-wallpaper-accent-alpha: 0.18;
  --smau-lock-wallpaper-accent-rgb: var(--os-accent-rgb, 79 140 255);
  --smau-lock-wallpaper-hi-alpha: 0.14;
  --smau-lock-wallpaper-pink-alpha: 0.12;
  --smau-lock-wallpaper-top: rgba(6, 8, 16, 1);
  --smau-lock-wallpaper-bottom: rgba(3, 4, 10, 1);
  --smau-lock-wallpaper-filter: saturate(1.05) contrast(1.05);
  --smau-lock-wallpaper-scale: 1.02;

  /* Lock scrim */
  --smau-lock-scrim-top: 0.55;
  --smau-lock-scrim-mid: 0.18;
  --smau-lock-scrim-bottom: 0.50;
  --smau-lock-scrim-spot-bottom: 0.45;

  /* Lock text/shadows */
  --smau-lock-text-shadow-strong: 0 10px 30px rgba(0, 0, 0, 0.55);
  --smau-lock-text-shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.50);
  --smau-lock-hint-shadow: 0 10px 26px rgba(0, 0, 0, 0.60);

  /* Lock notification preview card */
  --smau-lock-notify-radius: var(--smau-radius-card, 18px);
  --smau-lock-notify-bg: rgba(10, 12, 18, 0.42);
  --smau-lock-notify-border: rgba(255, 255, 255, 0.12);
  --smau-lock-notify-blur: 16px;
  --smau-lock-notify-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);

  /* Lock shortcuts */
  --smau-lock-shortcut-size: var(--tap-target-min, 44px);
  --smau-lock-shortcut-radius: 16px;
  --smau-lock-shortcut-bg: rgba(10, 12, 18, 0.36);
  --smau-lock-shortcut-border: rgba(255, 255, 255, 0.14);
  --smau-lock-shortcut-blur: var(--blur-call, 14px);
  --smau-lock-shortcut-shadow: 0 14px 28px rgba(0, 0, 0, 0.30);
  --smau-lock-shortcut-active-bg: rgba(255, 255, 255, 0.10);

  /* Creator-reserved groups */
  --smau-glass-opacity: 0.92;
  --smau-surface-noise: 0;
  --smau-type-scale: 1;

  /* -------------------------------------------------------------------------
   * ENHANCED CHROME TOKENS (side buttons, edge lighting, glows)
   * ------------------------------------------------------------------------- */

  /* Side button color identities */
  --smau-btn-lock-rgb: 156 96 255;
  --smau-btn-lock-color: rgba(var(--smau-btn-lock-rgb), 1);
  --smau-btn-about-rgb: 79 140 255;
  --smau-btn-about-color: rgba(var(--smau-btn-about-rgb), 1);
  --smau-btn-support-rgb: 255 82 82;
  --smau-btn-support-color: rgba(var(--smau-btn-support-rgb), 1);

  /* Multi-layer glow system */
  --smau-glow-layer-1-blur: 10px;
  --smau-glow-layer-2-blur: 6px;
  --smau-glow-layer-3-blur: 14px;
  --smau-glow-layer-1-spread: 28px;
  --smau-glow-layer-2-spread: 20px;
  --smau-glow-layer-3-spread: 42px;

  /* Glow animation tuning */
  --smau-glow-breathe-dur: 2.5s;
  --smau-glow-pulse-dur: 1.55s;
  --smau-glow-shift-dur: 3.2s;

  /* Edge lighting (phone perimeter) */
  --smau-edge-light-opacity: 0.08;
  --smau-edge-light-opacity-peak: 0.12;
  --smau-edge-light-blur: 18px;
  --smau-edge-light-flow-dur: 4s;

  /* Button press depth */
  --smau-btn-press-depth: 2px;
  --smau-btn-press-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);

  /* Ripple effect */
  --smau-ripple-dur: 0.6s;
  --smau-ripple-distance: 40px;
  --smau-ripple-opacity-start: 0.6;
}

/* Per-phone overrides (token-only)
   JS/Creator can set per-phone tokens by applying data-phone="<PHONE_ID>" on the phone root. */
[data-phone] {
  /* Intentionally empty: this selector documents the override root. */
}

/* -------------------------------------------------------------------------
 * OPT-IN LIGHT THEME (explicit only)
 * Put ONE of these on a root later:
 *   - <html data-smau-theme="light">
 *   - <div class="smau-phone-inner" data-phone="default" data-smau-theme="light">
 * This does not activate automatically from system prefs.
 * ------------------------------------------------------------------------- */
:root[data-smau-theme="light"],
[data-phone][data-smau-theme="light"] {
  --smau-stage-bg-solid: #f4f6fb;
  --smau-stage-bg:
    radial-gradient(900px 700px at 50% 20%, rgba(79, 140, 255, 0.14), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, #ffffff, #f2f4fb 60%, #eef1f8);

  --os-bg: #f6f7fb;
  --os-bg-grad: radial-gradient(circle at top, #ffffff, #f0f2f8 60%);

  --os-card: rgba(255, 255, 255, 0.92);
  --os-panel: rgba(255, 255, 255, 0.92);
  --os-panel-2: rgba(255, 255, 255, 0.78);
  --os-soft: rgba(240, 242, 248, 0.92);

  --os-ink: rgba(12, 14, 22, 0.92);
  --os-muted: rgba(12, 14, 22, 0.56);
  --os-dim: rgba(12, 14, 22, 0.40);

  --os-border: rgba(12, 14, 22, 0.10);
  --os-border-strong: rgba(12, 14, 22, 0.18);

  --smau-shadow-phone: 0 22px 70px rgba(0, 0, 0, 0.22);
  --smau-shadow-card: 0 10px 24px rgba(0, 0, 0, 0.16);
  --smau-shadow-float: 0 14px 34px rgba(0, 0, 0, 0.14);

  --os-accent-soft: rgba(79, 140, 255, 0.14);
  --os-accent-rgb: 79 140 255;

  /* Light-theme lock defaults (tuned for legibility on bright stages) */
  --smau-lock-notify-bg: rgba(255, 255, 255, 0.70);
  --smau-lock-notify-border: rgba(12, 14, 22, 0.12);
  --smau-lock-notify-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);

  --smau-lock-shortcut-bg: rgba(255, 255, 255, 0.58);
  --smau-lock-shortcut-border: rgba(12, 14, 22, 0.14);
  --smau-lock-shortcut-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
  --smau-lock-shortcut-active-bg: rgba(12, 14, 22, 0.06);

  /* Light-theme notifications tuning (keeps the same “glass” vibe but lighter) */
  --smau-notify-backdrop-bg: rgba(12, 14, 22, 0.22);

  --smau-notify-sheet-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.90));
  --smau-notify-group-bg: rgba(255, 255, 255, 0.78);
  --smau-notify-row-bg: rgba(255, 255, 255, 0.74);
  --smau-notify-row-bg-full: rgba(255, 255, 255, 0.80);
  --smau-notify-empty-bg: rgba(255, 255, 255, 0.64);

  --smau-notify-toast-bg: rgba(255, 255, 255, 0.72);

  --smau-notify-group-border: rgba(12, 14, 22, 0.10);
  --smau-notify-row-border: rgba(12, 14, 22, 0.12);
  --smau-notify-toast-border: rgba(12, 14, 22, 0.12);
  --smau-notify-empty-border: rgba(12, 14, 22, 0.10);

  --smau-notify-group-ink: rgba(12, 14, 22, 0.92);
  --smau-notify-group-title: rgba(12, 14, 22, 0.70);
  --smau-notify-group-caret: rgba(12, 14, 22, 0.45);
  --smau-notify-group-pill-bg: rgba(255, 255, 255, 0.70);
  --smau-notify-group-pill-border: rgba(12, 14, 22, 0.12);
  --smau-notify-group-pill-text: rgba(12, 14, 22, 0.86);

  --smau-notify-row-ink: rgba(12, 14, 22, 0.92);
  --smau-notify-row-app: rgba(12, 14, 22, 0.56);
  --smau-notify-row-title: rgba(12, 14, 22, 0.92);
  --smau-notify-row-text: rgba(12, 14, 22, 0.72);
  --smau-notify-row-text-full: rgba(12, 14, 22, 0.78);

  --smau-notify-toast-app: rgba(12, 14, 22, 0.56);
  --smau-notify-toast-title: rgba(12, 14, 22, 0.92);
  --smau-notify-toast-text: rgba(12, 14, 22, 0.74);

  --smau-notify-row-pill-bg: rgba(255, 255, 255, 0.70);
  --smau-notify-row-pill-border: rgba(12, 14, 22, 0.12);
  --smau-notify-row-pill-text: rgba(12, 14, 22, 0.86);

  --smau-notify-lock-ink: rgba(12, 14, 22, 0.72);
  --smau-notify-lock-ink-strong: rgba(12, 14, 22, 0.86);
  --smau-notify-lock-app: rgba(12, 14, 22, 0.50);
  --smau-notify-lock-text: rgba(12, 14, 22, 0.84);
  --smau-notify-lock-bg: rgba(255, 255, 255, 0.62);
  --smau-notify-lock-bg-strong: rgba(255, 255, 255, 0.72);
  --smau-notify-lock-border: rgba(12, 14, 22, 0.12);
  --smau-notify-lock-border-strong: rgba(12, 14, 22, 0.14);

  --smau-notify-inapp-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.78) 0%, rgba(248, 250, 252, 0.84) 100%);
  --smau-notify-inapp-border: rgba(12, 14, 22, 0.12);
  --smau-notify-inapp-app: rgba(12, 14, 22, 0.56);
  --smau-notify-inapp-title: rgba(12, 14, 22, 0.92);
  --smau-notify-inapp-text: rgba(12, 14, 22, 0.74);

  --smau-notify-clear-text: rgba(255, 255, 255, 0.94);
  --smau-notify-focus-ring: 2px solid rgba(12, 14, 22, 0.22);

  /* Enhanced chrome for light theme */
  --smau-edge-light-opacity: 0.06;
  --smau-edge-light-opacity-peak: 0.10;
}