/* ChatlyHub design tokens: color, type, shape. Light is default; dark follows the system or the user's setting. */
:root {
  --bg: #F3F5FA;
  --surface: #FFFFFF;
  --sunken: #EBEEF6;
  --ink: #0E1330;
  --ink-2: #4B5479;
  --ink-3: #6A7397;
  --line: #E1E5F0;
  --line-strong: #CBD1E3;

  --primary: #3B34D9;
  --primary-hover: #2E28B8;
  --on-primary: #FFFFFF;
  --primary-soft: #ECEBFD;
  --blue: #2F6BFF;
  --cyan: #12B5DB;
  --focus: #2F6BFF;
  --ring: rgba(59, 52, 217, .22);

  --danger: #D6334A;
  --danger-ink: #A81E36;
  --danger-soft: #FDECEF;
  --success: #0E8F63;
  --success-ink: #0A6B4A;
  --success-soft: #E4F6EE;
  --warn-ink: #7A4700;
  --warn-soft: #FFF3DC;

  --font-ui: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --shadow-pop: 0 10px 30px rgba(14, 19, 48, .14), 0 2px 6px rgba(14, 19, 48, .06);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0F26; --surface: #111936; --sunken: #0D1330;
    --ink: #EEF1FF; --ink-2: #AAB3D9; --ink-3: #8791BC;
    --line: #222C57; --line-strong: #33407A;
    --primary: #5F58F2; --primary-hover: #7770FF; --primary-soft: #1B1F4F;
    --blue: #6E97FF; --cyan: #3DD9F2; --focus: #8FB0FF; --ring: rgba(119, 112, 255, .35);
    --danger: #FF6B80; --danger-ink: #FF8C9C; --danger-soft: #3A1622;
    --success: #3DDC9C; --success-ink: #5EE6AE; --success-soft: #0F2D25;
    --warn-ink: #F2B44D; --warn-soft: #33260C;
    --shadow-pop: 0 10px 30px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0A0F26; --surface: #111936; --sunken: #0D1330;
  --ink: #EEF1FF; --ink-2: #AAB3D9; --ink-3: #8791BC;
  --line: #222C57; --line-strong: #33407A;
  --primary: #5F58F2; --primary-hover: #7770FF; --primary-soft: #1B1F4F;
  --blue: #6E97FF; --cyan: #3DD9F2; --focus: #8FB0FF; --ring: rgba(119, 112, 255, .35);
  --danger: #FF6B80; --danger-ink: #FF8C9C; --danger-soft: #3A1622;
  --success: #3DDC9C; --success-ink: #5EE6AE; --success-soft: #0F2D25;
  --warn-ink: #F2B44D; --warn-soft: #33260C;
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--bg); color: var(--ink);
  font: 400 1rem/1.55 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
p { margin: 0; }
a { color: var(--primary); text-underline-offset: 3px; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.icon { width: 20px; height: 20px; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 200; padding: 10px 14px; background: var(--ink); color: var(--bg); border-radius: var(--r-sm); }
.skip-link:focus { left: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}