/* Color tokens mirrored from the Figma file (Xj7SKBi5DN90wAFzfUvxxC),
   collections: Primitives, Color/Semantic. Names match the Figma variable
   names 1:1 so any section can be cross-checked against the source file. */

:root {
  /* motion */
  --transition-standard: 300ms ease-out;

  /* Figma's "Glass" effect (frosted/blurred material) used on the navbar,
     header icon buttons, search bar, and swipe-pin button. "radius: 100" in
     every Effect(type: GLASS, radius: 100) annotation Figma returns for these
     — the same field name this tool uses for shadow blur radius elsewhere —
     is the real blur amount, not a guess. */
  --glass-blur: blur(100px);

  /* Two DISTINCT Figma glass-effect variables, confirmed via fresh
     get_variable_defs — not guesses, not the shared --glass-blur above.
     "message-bubble" (node 89:4819): Effect(type: GLASS, radius: 100) — same
     radius as the shared token, but its own named variable, kept separate
     since it's bound to a different Figma variable, not because the number
     differs. "hero glass" (node 302:9962, the chat-thread top nav):
     Figma's own panel lists this effect's "Frost" (blur) as 42 — CSS
     backdrop-filter's px scale isn't a 1:1 match for Figma's Frost unit, so
     that number renders way stronger in a browser than it looks in Figma.
     26px is the real, live-tuned-against-Chrome value (confirmed correct
     by the user), not the raw Frost number. */
  --message-bubble-glass-blur: blur(100px);
  --topnav-hero-glass-blur: blur(26px);

  /* background */
  --background-screen-from: #300453;
  --background-screen-to: #100817;
  --background-fade-scrim: #261335;
  --background-navbar-glass: rgba(16, 8, 23, 0.24);
  --background-modal-box: rgba(55, 5, 97, 0.4);
  --background-accent: #fa0881;

  /* border */
  /* Navbar's own border — hardcoded literal in Figma (node 175:4938), not
     bound to any variable there. Previously conflated with the *different*
     Figma variable literally named --border-navbar-glass (0.6 alpha) that
     the chat-name input's focus state uses — see --border-input-focus below
     — coincidentally similar names, unrelated values. */
  --border-navbar-glass: rgba(255, 255, 255, 0.16);
  --border-input-focus: rgba(255, 255, 255, 0.6);
  --border-filter-chip-active: #fa0881;
  --border-header-button: rgba(255, 255, 255, 0.18);
  --border-modal-box: rgba(255, 255, 255, 0.12);

  /* surface */
  --surface-navbar-active-from: #f4f1f9;
  --surface-navbar-active-to: #d7c7e8;
  --surface-icon-button: rgba(255, 255, 255, 0.12);
  --surface-tag-team: rgba(87, 33, 127, 0.12);
  --surface-delete-action: #a80008;
  --surface-filter-chip-from: #f5f0fa;
  --surface-filter-chip-to: #dac5ea;
  --surface-header-button: rgba(255, 255, 255, 0.24);

  /* text */
  --text-primary: rgba(255, 255, 255, 0.96);
  --text-secondary: rgba(231, 231, 231, 0.7);
  --text-invert-white: #ffffff;
  --text-on-light: #232323;
  --text-filter-chip: #26063f;
  /* Real fetched Figma variable "Text/Base/text-secondary" (toggle switch,
     node 420:10628) — a solid gray, genuinely distinct from the translucent
     --text-secondary above despite the near-identical Figma name; used only
     for the toggle's disabled-state knob so far. */
  --text-secondary-solid: #919191;

  /* toggle switch (node 420:10628) */
  --background-disabled: #dddddd;
  --system-secondary-hover: #bdbdbd;

  /* icon */
  --icon-on-dark: #ffffff;

  /* indicator */
  --indicator-notification: #232323;
  --indicator-unread: rgba(255, 255, 255, 0.96);

  /* avatar backgrounds */
  --avatar-bg-blue: rgba(214, 221, 255, 0.88);
  --avatar-bg-purple: rgba(215, 204, 249, 0.88);
  --avatar-bg-red: #fbcac9;
  --avatar-bg-pink: #fdd8f3;
  --avatar-bg-green: #c6f9e0;
  --avatar-bg-yellow: rgb(255, 236, 202);

  /* icon glyph on avatar (matches background/screen-to) */
  --avatar-icon-color: #100817;

  /* "Background/Tag & Micellaneous" collection (chat-type gradient chips).
     green-200 IS the same primitive as --avatar-bg-green (confirmed by the
     user directly) — both updated together. The others here are still
     kept separate from their numerically-close --avatar-bg-* counterparts
     since those weren't confirmed as the same variable. Figma's own name
     for the last one has a stray trailing dash ("background-pink-");
     dropped here, kept only as this note. */
  --tag-bg-blue-200: #d6ddff;
  --tag-bg-purple-200: #d7ccf9;
  --tag-bg-green-200: #c6f9e0;
  --tag-bg-pink-200: #fdd8f3;
}

/* Kill the browser's default mobile tap-highlight (a semi-transparent blue
   flash on every tap) — this app supplies its own deliberate :active/state
   feedback per element, the default flash was never intentional. */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Native apps never show a scrollbar track — this is a native-app
   prototype, not a desktop web page (see CLAUDE.md), so every scrollable
   region in it (chat list, message thread, modals) hides the scrollbar
   globally rather than per-element. Scrolling itself is untouched, only
   the visible track/thumb. */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  display: none;
}

button {
  outline: none;
}