/* ============================================================================
   kazzola-tokens.css
   Source of truth for the Kazzola Messaging redesign.
   Extracted verbatim from the "Kazzola Design Tokens" + "Kazzola Messaging"
   design (the sheet's own footer calls this the "machine-readable copy").

   - Colours / shadows: light on :root, dark on html[data-theme="dark"].
     Values are EXACT from the design — do not retune here without updating
     the design.
   - Fonts: family + heading weight only. @font-face loading stays in
     _Host.cshtml (Barlow + Barlow Condensed via the font link), not here.
   - Radii / spacing: the design DOCUMENTS a scale (see block below) but the
     mock itself still hardcodes these px values inline. They're exposed as
     tokens here so components can reference them instead of hardcoding.
     NOTE: the old boilerplate token set used --space-1..8 = 3.4px..27.2px and
     --radius-sm/md/lg — DIFFERENT values. If those still live in the app's
     current kazzola-tokens.css, reconcile before merging (see chat notes).
   ========================================================================== */

:root {
  /* — Surfaces — */
  --app:         #f3f4f7;   /* app ground */
  --panel:       #ffffff;   /* panel / card surface */
  --panel-2:     #f8f9fb;   /* inset surface, submenu */

  /* — Text — */
  --ink:         #14171a;             /* primary text */
  --muted:       rgba(20,23,26,.62);  /* secondary text */
  --faint:       rgba(20,23,26,.56);  /* tertiary / meta text */

  /* — Lines & hover — */
  --line:        rgba(20,23,26,.07);  /* hairline borders */
  --hover:       rgba(20,23,26,.045); /* row hover wash */

  /* — Accent — */
  --accent:      #0378d5;             /* brand / primary action */
  --accent-soft: rgba(3,120,213,.10); /* selected nav, tint fills */
  --accent-ink:  #0369b7;             /* accent text on ground */

  /* — Message bubbles — */
  --sent-bg:     #0378d5;   /* outgoing bubble */
  --sent-fg:     #ffffff;   /* outgoing bubble text */
  --recv-bg:     #f1f3f7;   /* incoming bubble */

  /* — Status — */
  --on:          #22c07a;             /* online / success */
  --off:         rgba(20,23,26,.22);  /* offline / disabled */
  --alert:       #d0453c;             /* unread dot, destructive */

  /* — Needs-action row — */
  --need:        #fff7e2;              /* fill */
  --need-line:   rgba(206,150,10,.22); /* border */
  --need-ink:    #8a5c04;              /* text */

  /* — Elevation — */
  --sh-1: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04); /* resting cards, list panels */
  --sh-2: 0 4px 14px rgba(16,24,40,.07), 0 1px 3px rgba(16,24,40,.05); /* popovers, submenus, toasts */
  --sh-3: 0 18px 44px rgba(16,24,40,.16), 0 2px 8px rgba(16,24,40,.08); /* modals, drawers over scrim */

  /* — Type — */
  --font-body:           "Barlow", system-ui, sans-serif;
  --font-heading:        "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;

  /* — Radii (documented scale) — */
  --radius-chip:   8px;   /* chips, small buttons */
  --radius-row:    11px;  /* list rows, inputs */
  --radius-panel:  14px;  /* panels, submenu, cards */
  --radius-bubble: 18px;  /* message bubbles, modals */
  --radius-pill:   99px;  /* badges, pills, toggles */
  /* avatars & status dots use 50% directly */

  /* — Spacing (documented scale) — */
  --space-2:  2px;   /* icon-to-dot nudge */
  --space-4:  4px;   /* label to value */
  --space-6:  6px;   /* inline chip gap */
  --space-8:  8px;   /* default gap, icon to text */
  --space-10: 10px;  /* page gutter, column gap */
  --space-11: 11px;  /* list row padding X */
  --space-12: 12px;  /* card inner gap */
  --space-14: 14px;  /* panel padding */
  --space-16: 16px;  /* header padding X */
  --space-20: 20px;  /* section separation */
}

html[data-theme="dark"] {
  --app:         #0d1014;
  --panel:       #15181d;
  --panel-2:     #1a1e24;
  --ink:         #e9ebee;
  --muted:       rgba(233,235,238,.66);
  --faint:       rgba(233,235,238,.56);
  --line:        rgba(255,255,255,.07);
  --hover:       rgba(255,255,255,.05);
  --accent:      #3f9dea;
  --accent-soft: rgba(63,157,234,.14);
  --accent-ink:  #8cc6f5;
  --sent-bg:     #1c6cb2;
  --sent-fg:     #eef6fd;
  --recv-bg:     #1e232a;
  --on:          #34cd88;
  --off:         rgba(233,235,238,.24);
  --alert:       #ef7c72;
  --need:        rgba(240,183,50,.11);
  --need-line:   rgba(240,183,50,.24);
  --need-ink:    #f0c86a;
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 6px 18px rgba(0,0,0,.45);
  --sh-3: 0 20px 48px rgba(0,0,0,.6);
}

/* ============================================================================
   Global base + keyframes.
   These can't live in a scoped .razor.css: base html/body rules and
   @keyframes names aren't rewritten by Blazor's scoping, so they belong in a
   single global sheet. Everything ELSE stays in each component's scoped css.
   ========================================================================== */

html, body {
  margin: 0;
  height: 100%;
  background: var(--app);
  color: var(--ink);
  font-family: var(--font-body);
}
a        { color: var(--accent-ink); text-decoration: none; }
a:hover  { color: var(--accent); }
input, textarea, button { font-family: var(--font-body); }

*::-webkit-scrollbar        { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb  { background: rgba(128,138,150,.32); border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(128,138,150,.5); }
*::-webkit-scrollbar-track  { background: transparent; }

@keyframes kzblink { 0%,60%,100% { opacity:.28; transform:translateY(0);} 30% { opacity:1; transform:translateY(-3px);} }
@keyframes kzin    { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:none; } }
@keyframes kzpop   { from { opacity:0; transform:translateY(8px) scale(.98);} to { opacity:1; transform:none; } }
@keyframes kzdrop  { from { opacity:0; transform:translateY(-8px) scale(.98);} to { opacity:1; transform:none; } }
@keyframes kzslide { from { opacity:0; transform:translateX(-10px);} to { opacity:1; transform:none; } }