/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   DESIGN TOKENS — QbcGram color/shape/motion contract
   Single source of truth for all colors/spacing

   Reskinned onto the shared Material Design 3 (M3 Expressive) system,
   teal/amber/coral seed family. See ../../m3-tokens.css (copied from
   products/shared/design/m3-tokens.css) for the canonical --md-sys-*
   scales this file maps onto. It is linked in index.html BEFORE this
   file, so --md-sys-* custom properties are available here.

   IMPORTANT: every custom property name below is unchanged from the
   pre-M3 version — app.css, base.css and JS (themes.js, helpers.js,
   AppearanceTab.js) all reference these names directly. Only the
   VALUES were repointed. Do not rename anything here without also
   updating those call sites.

   theme-neon-glow.css (the QbcGram brand theme, active by default)
   overrides the color block below via `body.theme-neon-glow` — its
   cyan/violet palette is untouched by this pass. What DOES apply
   everywhere, including under neon-glow, is the shape/elevation/motion
   scale, since those tokens aren't part of neon-glow's own override
   block. That's what actually unifies qbcgram with the rest of the
   product suite: same corner radii, same shadow depth, same easing
   curves — its own accent color story stays intact.
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */

:root {
  /* Backgrounds — mapped onto the M3 5-step surface-container scale.
     qbcgram's three-column layout (server strip / channel sidebar /
     chat canvas) reads as three tiers of depth, darkest to lightest,
     with two more elevated tiers for input fields and hover/active
     states sitting above the canvas. */
  --bg-tertiary:   var(--md-sys-color-surface-container-lowest); /* server strip — darkest */
  --bg-secondary:  var(--md-sys-color-surface-container-low);    /* channel/DM sidebar */
  --bg-primary:    var(--md-sys-color-surface);                  /* chat canvas */
  --bg-input:      var(--md-sys-color-surface-container-high);   /* message box, popovers */
  --bg-hover:      color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
  --bg-active:     var(--md-sys-color-surface-container-highest);
  --bg-overlay:    rgba(0, 0, 0, 0.7);

  /* Background modifiers (semi-transparent state layers, M3-style) */
  --bg-modifier-hover:    color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent);
  --bg-modifier-active:   color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
  --bg-modifier-selected: color-mix(in srgb, var(--md-sys-color-on-surface) 14%, transparent);

  /* Accent — M3 primary. theme-neon-glow.css overrides this (and the
     two below) with its own cyan; this is only what shows for the
     "dark"/"midnight"/"light" built-in theme picks and any screen
     rendered before a theme class is applied. */
  --accent:        var(--md-sys-color-primary);
  --accent-hover:  color-mix(in srgb, var(--md-sys-color-primary) 88%, black);
  --accent-active: color-mix(in srgb, var(--md-sys-color-primary) 76%, black);

  /* Theme contract — overrideable by custom themes */
  --accent-primary:   var(--accent);
  --accent-secondary: var(--accent-hover);
  --accent-gradient:  linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  --border-glow:      transparent;

  /* Text */
  --text-normal:   var(--md-sys-color-on-surface);
  --text-muted:    var(--md-sys-color-on-surface-variant);
  --text-faint:    color-mix(in srgb, var(--md-sys-color-on-surface-variant) 70%, transparent);
  --text-micro:    color-mix(in srgb, var(--md-sys-color-on-surface-variant) 50%, transparent);
  --text-link:     var(--md-sys-color-primary);

  /* Semantic text aliases — --text-danger follows M3 error; success/
     warning have no M3 baseline role, so they keep their existing
     hand-picked hues rather than inventing a one-off M3-flavored green. */
  --text-positive: #23a55a;
  --text-warning:  #f0b232;
  --text-danger:   var(--md-sys-color-error);

  /* Header colors */
  --header-primary:   var(--md-sys-color-on-surface);
  --header-secondary: var(--md-sys-color-on-surface-variant);

  /* Interactive icon states */
  --interactive-normal: var(--md-sys-color-on-surface-variant);
  --interactive-hover:  var(--md-sys-color-on-surface);
  --interactive-active: var(--md-sys-color-on-surface);
  --interactive-muted:  var(--md-sys-color-outline);

  /* Channel icon */
  --channel-icon: var(--md-sys-color-on-surface-variant);

  /* Status colors — voice/mute/role indicators. --red follows M3 error
     so every danger cue in the app (mute icons, hangup buttons, form
     errors) shares one hue. Green/yellow are outside M3's baseline
     roles and keep their existing values. */
  --green:         #23a55a;
  --yellow:        #f0b232;
  --red:           var(--md-sys-color-error);

  /* Borders */
  --border:        var(--md-sys-color-outline-variant);
  --border-strong: var(--md-sys-color-outline);

  /* Role colors — user-facing badge colors, not app chrome; left as-is */
  --role-owner:    #e74c3c;
  --role-admin:    #f39c12;
  --role-mod:      #2ecc71;
  --role-member:   #949ba4;

  /* Elevation shadows — M3 elevation scale */
  --elevation-low:  var(--md-sys-elevation-1);
  --elevation-high: var(--md-sys-elevation-3);

  /* Scrollbar colors */
  --scrollbar-thin-thumb:  var(--md-sys-color-outline-variant);
  --scrollbar-auto-thumb:  var(--md-sys-color-outline-variant);
  --scrollbar-auto-track:  transparent;

  /* Transition timing — durations unchanged (already tuned by feel),
     eased onto the shared M3 standard curve instead of plain "ease". */
  --transition-fast:   100ms var(--md-sys-motion-easing-standard);
  --transition-normal: 170ms var(--md-sys-motion-easing-standard);
  --transition-slow:   200ms var(--md-sys-motion-easing-standard-decelerate);

  /* Typography — qbcgram's own compact, chat-optimized scale. Left
     alone deliberately: M3's type scale is tuned for spacious app
     shells, not dense message lists, and the brief for this pass is
     tokens/shape/color, not a typographic rebuild. */
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "Cascadia Code", "Consolas", monospace;

  /* Typography scale */
  --font-size-xxs: 10px;
  --font-size-xs:  12px;
  --font-size-sm:  13px;
  --font-size-md:  14px;
  --font-size-lg:  16px;
  --font-size-xl:  20px;
  --font-size-xxl: 24px;

  /* Radii — mapped onto the M3 shape scale. --radius-sm/md/lg land on
     exact M3 stops (extra-small/small/large); --radius-pill moves from
     a fixed 24px to the true M3 "full" stadium radius, which resolves
     identically wherever it's used today (badges/pills sized well
     under 9999px). --radius-circle stays literal 50%: that's how M3
     itself expresses "full" on a square element, and it's exact
     regardless of aspect ratio. */
  --radius-sm:     var(--md-sys-shape-corner-extra-small);
  --radius-md:     var(--md-sys-shape-corner-small);
  --radius-lg:     var(--md-sys-shape-corner-large);
  --radius-pill:   var(--md-sys-shape-corner-full);
  --radius-circle: 50%;

  /* Spacing */
  --sidebar-width: 240px;
  --header-height: 48px;

  /* Message layout */
  --message-group-spacing: 17px;
  --message-inline-spacing: 0;
  --avatar-size: 40px;
  --avatar-offset-left: 16px;
  --message-content-left: 72px;
  --message-content-right: 48px;
}