/* frag-fallback.css — static safety net for Frag's runtime-injected design tokens.
   ====================================================================
   WHY THIS EXISTS: Frag's layout tokens (--gap-*, --borderRadius-*,
   --transitions-*, --layout-*, --effects-*) are written ONLY at runtime by
   the LoadTheme SolidJS effect (stoatWebTheme.ts -> documentElement.style).
   They are defined nowhere in the static build CSS, and the inline <style>
   fallback in index.html covers only --md-sys-color-* colours. So if that one
   effect throws before its setProperty loop (observed on iOS Safari 26.5 ->
   every var(--gap/--borderRadius) is invalid -> "everything squared, layout
   broken"), the whole UI loses spacing + corners while text still renders.

   This file restores those tokens statically. It is a SAFETY NET only:
   when LoadTheme runs (e.g. desktop), it sets the same keys on
   documentElement.style (inline style), which OUTRANKS this :root rule, so
   working clients are unaffected and themed normally. Values mirror
   stoatWebTheme.ts `themeConstants` exactly (dark + blur defaults).

   Injected via NPM host 1.conf (frag.hexios.top) sub_filter. Remove by
   reverting 1.conf to 1.conf.bak-iosfix-20260615. See memory.
   ==================================================================== */
:root {
  --unset-fg: red;
  --unset-bg: linear-gradient(to right, red, blue);

  --message-size: 16px;
  --message-group-spacing: 8px;

  --emoji-size: 1.4em;
  --emoji-size-medium: 48px;
  --emoji-size-large: 96px;

  --effects-blur-md: blur(20px);
  --effects-invert-black: invert(100%);
  --effects-invert-light: invert(0%);

  --transitions-fast: .1s ease-in-out;
  --transitions-medium: .2s ease;

  --brand-presence-online: #3ABF7E;
  --brand-presence-idle: #F39F00;
  --brand-presence-busy: #F84848;
  --brand-presence-focus: #4799F0;
  --brand-presence-invisible: #A5A5A5;

  --fonts-primary: "Inter", sans-serif;
  --fonts-monospace: "Jetbrains Mono", monospace;

  --borderRadius-none: 0px;
  --borderRadius-xs: 4px;
  --borderRadius-sm: 8px;
  --borderRadius-md: 12px;
  --borderRadius-lg: 16px;
  --borderRadius-li: 20px;
  --borderRadius-xl: 28px;
  --borderRadius-xli: 32px;
  --borderRadius-xxl: 48px;
  --borderRadius-full: 9999px;
  --borderRadius-circle: 100%;

  --gap-none: 0;
  --gap-xxs: 1px;
  --gap-xs: 2px;
  --gap-s: 6px;
  --gap-sm: 4px;
  --gap-md: 8px;
  --gap-l: 12px;
  --gap-lg: 15px;
  --gap-x: 28px;
  --gap-xl: 32px;
  --gap-xxl: 64px;

  --layout-width-channel-sidebar: 248px;
  --layout-width-user-context-menu-truncate: 300px;
  --layout-height-message-box: 32vh;
}