:root {
  --call-avatar: 7rem;
  --call-control-size: 3.5rem;
  --call-preview-width: 7rem;
  --call-video-surface: #000000;
  --mention-list-height: 12rem;
  --mention-on-accent: #ffffff24;
  --family-font: -apple-system, BlinkMacSystemFont, 'Noto Sans TC', 'Segoe UI', sans-serif;
  --surface-page: #f8f6f2;
  --surface-card: #fffefd;
  --surface-soft: #f1ede7;
  --surface-accent: #faeee7;
  --surface-glass: #fffefded;
  --ink-primary: #302e2b;
  --ink-secondary: #71695f;
  --ink-quiet: #787168;
  --ink-on-accent: #ffffff;
  --action-primary: #b94f32;
  --action-hover: #9e3c24;
  --action-selected: #8d3d27;
  --action-danger: #ae3c37;
  --feedback-success: #236b46;
  --feedback-success-soft: #eaf5ed;
  --feedback-warning: #855a16;
  --feedback-warning-soft: #fff2da;
  --line-soft: #e9e2d9;
  --line-strong: #c9bfb2;
  --glass-dark: #222b26c7;
  --glass-lens: #121a18a6;
  --glass-line: #ffffff52;
  --focus-ring: #b94f3270;
  --shadow-soft: 0 8px 30px #49382008;
  --shadow-float: 0 12px 32px #2d312424;
  --shadow-modal: 0 24px 80px #2d241d30;
  --radius-small: .75rem;
  --radius-control: 1rem;
  --radius-card: 1.5rem;
  --radius-large: 1.75rem;
  --radius-pill: 999px;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --focus-width: 2px;
  --text-date: .625rem;
  --text-micro: .6875rem;
  --text-caption: .75rem;
  --text-small: .8125rem;
  --text-body: .875rem;
  --text-input: 1rem;
  --text-title: 1.875rem;
  --text-section: 1.125rem;
  --text-modal: 1.5rem;
  --icon-small: 1rem;
  --icon-normal: 1.25rem;
  --icon-large: 1.5rem;
  --touch-small: 2rem;
  --touch-normal: 2.75rem;
  --avatar-small: 2rem;
  --avatar-normal: 2.875rem;
  --control-height: 2.75rem;
  --card-preview: 10rem;
  --chat-photo-preview: 15rem;
  --photo-radius: 1.125rem;
  --nav-height: 3.875rem;
  --nav-width: 27.5rem;
  --nav-gap: 1.25rem;
  --desktop-sidebar: 14rem;
  --desktop-aside: 15rem;
  --desktop-main: 2.5rem;
  --desktop-chat-list: 17rem;
  --desktop-title: 2.125rem;
  --modal-width: 30rem;
  --mobile-chat-min: 65dvh;
  --chat-composer-gap: .1875rem;
  --chat-top-edge-clearance: 0px;
  --safe-bottom: env(safe-area-inset-bottom);
  --chat-surface: #fcfaf7;
  --chat-incoming: #efebe5;
  --ease-standard: cubic-bezier(.22, 1, .36, 1);
  --motion-fast: 160ms;
  --motion-normal: 260ms;
  --motion-sheet: 380ms;
  --scrim: rgb(0 0 0 / 32%);
  --blur-glass: 1rem;
  --loading-opacity: .72;
}

/* Family colour themes: an accent ([data-theme]) plus an optional background
   glow ([data-glow]). Page surfaces and the iOS status-bar colour stay the same,
   and opaque headers keep covering the top edge. Any element may carry these
   attributes, which lets the picker preview each choice inside the current one. */
[data-theme="red"] {
  --action-primary: #c0362c; --action-hover: #a12d25; --action-selected: #8e2821;
  --surface-accent: #f9edec; --focus-ring: #c0362c70;
}
[data-theme="sunset"] {
  --action-primary: #b94f32; --action-hover: #9e3c24; --action-selected: #8d3d27;
  --surface-accent: #faeee7; --focus-ring: #b94f3270;
}
[data-theme="amber"] {
  --action-primary: #9a5b00; --action-hover: #814c00; --action-selected: #724300;
  --surface-accent: #f6f0e8; --focus-ring: #9a5b0070;
}
[data-theme="lime"] {
  --action-primary: #4b7a12; --action-hover: #3f660f; --action-selected: #385a0d;
  --surface-accent: #eff3ea; --focus-ring: #4b7a1270;
}
[data-theme="forest"] {
  --action-primary: #2f6b4f; --action-hover: #24563f; --action-selected: #1e4a36;
  --surface-accent: #e6f0e9; --focus-ring: #2f6b4f70;
}
[data-theme="teal"] {
  --action-primary: #0f6e66; --action-hover: #0d5c56; --action-selected: #0b514b;
  --surface-accent: #e9f2f1; --focus-ring: #0f6e6670;
}
[data-theme="ocean"] {
  --action-primary: #2d5f8b; --action-hover: #234c70; --action-selected: #1d4062;
  --surface-accent: #e4edf6; --focus-ring: #2d5f8b70;
}
[data-theme="blue"] {
  --action-primary: #2f55c4; --action-hover: #2747a5; --action-selected: #233f91;
  --surface-accent: #ecf0fa; --focus-ring: #2f55c470;
}
[data-theme="violet"] {
  --action-primary: #7140c4; --action-hover: #5f36a5; --action-selected: #542f91;
  --surface-accent: #f2eefa; --focus-ring: #7140c470;
}
[data-theme="lavender"] {
  --action-primary: #6b4f96; --action-hover: #583f7e; --action-selected: #4b356c;
  --surface-accent: #eee8f6; --focus-ring: #6b4f9670;
}
[data-theme="magenta"] {
  --action-primary: #9c2a94; --action-hover: #83237c; --action-selected: #731f6e;
  --surface-accent: #f6ecf5; --focus-ring: #9c2a9470;
}
[data-theme="blossom"] {
  --action-primary: #ad3a5c; --action-hover: #93304d; --action-selected: #7f2943;
  --surface-accent: #fbe8ee; --focus-ring: #ad3a5c70;
}

[data-glow="none"] { --glow-a: transparent; --glow-b: transparent; --glow-c: transparent; }
[data-glow="peach"] { --glow-a: #ffc7a3; --glow-b: #ffb1a8; --glow-c: #ffe3c2; }
[data-glow="rose"] { --glow-a: #ffb3c4; --glow-b: #f7a8d8; --glow-c: #ffd6d6; }
[data-glow="mint"] { --glow-a: #a8ecd0; --glow-b: #c4f0b8; --glow-c: #b5e6f0; }
[data-glow="sky"] { --glow-a: #a8d8ff; --glow-b: #b9c8ff; --glow-c: #c8f1ff; }
[data-glow="lilac"] { --glow-a: #d4b8ff; --glow-b: #f0c2f0; --glow-c: #c2c8ff; }
[data-glow="lemon"] { --glow-a: #fff0a0; --glow-b: #ffd59a; --glow-c: #e2f5a8; }
[data-glow="dusk"] { --glow-a: #ffc59a; --glow-b: #f59ab0; --glow-c: #b9a2f0; }
[data-glow="aurora"] { --glow-a: #9ff0d8; --glow-b: #a8b8ff; --glow-c: #d8a8ff; }
[data-glow="sakura"] { --glow-a: #ffc2d6; --glow-b: #e8c2ff; --glow-c: #ffe4ee; }
[data-glow="lagoon"] { --glow-a: #8fdcff; --glow-b: #8ff0e0; --glow-c: #a8c4ff; }
[data-glow="twilight"] { --glow-a: #b0b0f5; --glow-b: #f0a8c8; --glow-c: #8fb8f0; }
:root {
  --glow-image:
    radial-gradient(70% 45% at 0% 35%, color-mix(in srgb, var(--glow-a, transparent) 70%, transparent), transparent 72%),
    radial-gradient(65% 40% at 100% 60%, color-mix(in srgb, var(--glow-b, transparent) 65%, transparent), transparent 72%),
    radial-gradient(80% 45% at 35% 105%, color-mix(in srgb, var(--glow-c, transparent) 70%, transparent), transparent 72%);
}