*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Brand tokens (source of truth) ────────────────────────────────────── */
  --brand-main:       #402E54; /* surface-elevated */
  --brand-black:      #34224A; /* surface-dark */
  --brand-black-dark: #21152F; /* bg-dark */
  --brand-white:      #FFFDF9;
  --brand-white-dark: #C29EE6; /* lavender / text-muted-dark */
  --brand-border:     #4D3F58; /* border-dark */

  --brand-primary-light: #F7D9FF; /* highlight */
  --brand-primary-base:  #B85AF0; /* primary-light */
  --brand-primary-dark:  #9A33DC; /* primary */
  --brand-accent:        #EC6FFF;

  --brand-secondary-light: #8BE3BF;
  --brand-secondary-base:  #35C98A; /* success */
  --brand-secondary-dark:  #28A672;

  --brand-error-light: #F8A3B6;
  --brand-error-base:  #F06483; /* error */
  --brand-error-dark:  #C94464;

  --brand-link-light: #A8D0FF;
  --brand-link-base:  #63A9FF; /* info */
  --brand-link-dark:  #3F86DB;

  /* ── Semantic tokens (dark mode default) ── */
  --bg-0:     var(--brand-black-dark); /* rail / page */
  --bg-1:     var(--brand-black);      /* sidebar / card */
  --bg-2:     var(--brand-black);      /* chat area / card */
  --bg-3:     var(--brand-main);       /* input box, modals, pills — elevated */
  --bg-4:     var(--brand-border);     /* elevated hover */
  --bg-hover: #3B2A50;
  --bg-active:var(--brand-main);

  --accent:   var(--brand-primary-dark);
  --accent-h: #7D20B8;
  --accent-l: var(--brand-primary-base);
  --accent-pale: var(--brand-primary-light);

  --green:    var(--brand-secondary-base);
  --green-h:  var(--brand-secondary-dark);
  --green-l:  var(--brand-secondary-light);
  --red:      var(--brand-error-base);
  --red-h:    var(--brand-error-dark);
  --red-l:    var(--brand-error-light);
  --yellow:   #F5B942;

  --link:     var(--brand-link-base);
  --link-h:   var(--brand-link-dark);
  --link-l:   var(--brand-link-light);

  --text-0: var(--brand-white);
  --text-1: #EDE4F5;
  --text-2: #D6C3EB;
  --text-3: var(--brand-white-dark);
  --text-muted: #8E7BA3;

  --ch-width:    240px;
  --srv-width:   72px;
  --members-width: 240px;
  --input-h:     44px;

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;

  --shadow: 0 1px 3px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.25);
  --font: 'Inter', sans-serif;
}

/* ── Light mode — roles reverse: white surfaces step up, dark tones become text ── */
:root[data-theme="light"] {
  --bg-0:     #FFFDF9;
  --bg-1:     #F8F3FC;
  --bg-2:     #FFFDF9;
  --bg-3:     #E9DDF3;
  --bg-4:     #DCCBEA;
  --bg-hover: #F1E8F8;
  --bg-active:#E9DDF3;

  --text-0: #21152F;
  --text-1: #34224A;
  --text-2: #4D3F58;
  --text-3: #7A6A8C;
  --text-muted: #9A8BAA;

  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.06);
}

html, body { height: 100%; overflow: hidden; background: var(--bg-0); color: var(--text-1); font-family: var(--font); font-size: 15px; line-height: 1.4; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: .75rem; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.field input {
  background: var(--bg-0); border: 1.5px solid var(--bg-3); border-radius: var(--radius);
  padding: 10px 12px; color: var(--text-0); font-size: .9375rem; outline: none; font-family: var(--font);
  transition: border-color .15s;
}
.field input:focus { border-color: var(--accent); }
.field input.error { border-color: var(--red); }

.btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border: none; border-radius: var(--radius); font-size: .9375rem; font-weight: 500; cursor: pointer; transition: background .15s, opacity .15s; font-family: var(--font); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-h); }
.btn-primary:disabled { opacity: .5; cursor: default; }
.btn-secondary { background: var(--bg-3); color: var(--text-1); }
.btn-secondary:hover { background: var(--bg-4); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { filter: brightness(1.1); }
.btn-ghost { background: none; color: var(--text-2); padding: 6px 10px; }
.btn-ghost:hover { background: var(--bg-3); color: var(--text-0); }
.btn-icon { background: none; border: none; color: var(--text-3); padding: 6px; border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; transition: color .15s, background .15s; }
.btn-icon:hover { color: var(--text-0); background: var(--bg-3); }
.btn-icon svg { display: block; }

.err-msg { font-size: .8125rem; color: var(--red); min-height: 18px; }


/* ══ UX & consistency layer (shared by every page) ═══════════════════════════ */
:root { color-scheme: dark; --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); --ease: cubic-bezier(.2,.8,.2,1); --t: .15s; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; }
:root[data-theme="light"] { color-scheme: light; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent); color: #fff; }
button, input, textarea, select { font-family: inherit; }
a { color: var(--link); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--link-l); text-decoration: underline; }

/* Keyboard focus: one consistent ring everywhere, no ring for mouse/touch */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent-l); outline-offset: 2px; border-radius: var(--radius-sm); }
.field input:focus, .form-input:focus, textarea:focus { border-color: var(--accent); box-shadow: var(--ring); }
.field input::placeholder, .form-input::placeholder, textarea::placeholder { color: var(--text-muted); }
.field input:hover:not(:focus) { border-color: var(--bg-4); }

/* Buttons: consistent hover / pressed / disabled / min touch target */
.btn, .btn-icon { transition: background var(--t), color var(--t), opacity var(--t), transform .08s, filter var(--t); user-select: none; }
.btn { min-height: 40px; }
.btn:active:not(:disabled), .btn-icon:active { transform: scale(.97); }
.btn:disabled, .btn-icon:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary:disabled:hover { background: var(--accent); }
.btn-icon { min-width: 32px; min-height: 32px; justify-content: center; }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--bg-4) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* Errors fade in instead of popping */
.err-msg:not(:empty) { animation: ux-in .15s var(--ease); }
@keyframes ux-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }

/* Shared loading spinner */
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--bg-3); border-top-color: var(--accent); animation: ux-spin .7s linear infinite; }
@keyframes ux-spin { to { transform: rotate(360deg); } }

/* Mobile: 16px inputs prevent iOS zoom; safe areas; bigger tap targets */
@media (max-width: 860px) {
  input, textarea, select { font-size: 16px !important; }
  .btn { min-height: 44px; }
  body { padding-bottom: env(safe-area-inset-bottom); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ══ Motion: places that had none ════════════════════════════════════════════ */
@keyframes ux-page { from { opacity: 0; } to { opacity: 1; } }
body { animation: ux-page .25s ease both; }
.auth-box { animation: ux-in-up .35s var(--ease) both; }
.tab-content.active, .auth-tab, .nav-item, .theme-opt, .slider, .slider:before { transition-timing-function: var(--ease); }
.auth-tab { transition: background var(--t), color var(--t); }
.nav-item, .theme-opt, .form-input, .field input { transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t); }
@keyframes ux-in-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Smooth theme switching on the big surfaces */
body, #server-rail, #channel-sidebar, #chat-area, #members-panel, .input-box, .modal, .auth-box, .sidebar, .content {
  transition-property: background-color, border-color, color, box-shadow, width, min-width, opacity;
  transition-duration: .25s; transition-timing-function: var(--ease);
}