/* DarkSpark design tokens.
 *
 * Everything is a custom property so the Electron shell inherits this file
 * byte-identically. Nothing below hardcodes a colour outside this block.
 */

:root {
  /* ---- substrate ------------------------------------------------------- */
  --ds-void: #05070a;
  --ds-bg: #07090d;
  --ds-surface: #0b0f17;
  --ds-surface-2: #101623;
  --ds-surface-3: #161e2e;
  --ds-raised: #1b2436;

  /* ---- structure ------------------------------------------------------- */
  --ds-line: #1d2637;
  --ds-line-bright: #2a3852;
  --ds-line-hot: #38507a;

  /* ---- text ------------------------------------------------------------ */
  --ds-text: #e6edf7;
  --ds-text-dim: #94a3bd;
  --ds-text-faint: #5d6b85;
  --ds-text-ghost: #3c4964;

  /* ---- neon ------------------------------------------------------------ */
  --ds-cyan: #00e5ff;
  --ds-magenta: #ff2bd1;
  --ds-violet: #8b5cf6;
  --ds-acid: #b6ff3b;
  --ds-amber: #ffb020;
  --ds-red: #ff3b5c;
  --ds-blue: #3b82f6;

  /* ---- semantic -------------------------------------------------------- */
  --ds-ok: var(--ds-acid);
  --ds-warn: var(--ds-amber);
  --ds-err: var(--ds-red);
  --ds-info: var(--ds-cyan);
  --ds-conflict: var(--ds-amber);

  /* ---- accent (overridden per tenant at runtime) ------------------------ */
  --ds-accent-hue: 187;
  --ds-accent: hsl(var(--ds-accent-hue) 100% 62%);
  --ds-accent-dim: hsl(var(--ds-accent-hue) 70% 42%);
  --ds-accent-deep: hsl(var(--ds-accent-hue) 80% 16%);
  --ds-accent-glow: hsl(var(--ds-accent-hue) 100% 62% / 0.35);
  --ds-accent-wash: hsl(var(--ds-accent-hue) 100% 62% / 0.08);

  /* ---- glow ------------------------------------------------------------ */
  --ds-glow-sm: 0 0 8px var(--ds-accent-glow);
  --ds-glow-md: 0 0 18px var(--ds-accent-glow), 0 0 3px hsl(var(--ds-accent-hue) 100% 70% / 0.5);
  --ds-glow-lg: 0 0 40px var(--ds-accent-glow), 0 0 12px hsl(var(--ds-accent-hue) 100% 70% / 0.4);

  /* ---- type ------------------------------------------------------------ */
  --ds-font: 'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
  --ds-mono: 'JetBrains Mono', 'Cascadia Code', 'Consolas', ui-monospace, monospace;

  --ds-fs-xs: 10.5px;
  --ds-fs-sm: 11.5px;
  --ds-fs-md: 12.5px;
  --ds-fs-lg: 14px;
  --ds-fs-xl: 17px;
  --ds-fs-2xl: 22px;
  --ds-fs-3xl: 30px;

  /* ---- density (comfortable is the default; see [data-density]) --------- */
  --ds-row-h: 30px;
  --ds-pad: 12px;
  --ds-pad-sm: 8px;
  --ds-gap: 10px;

  /* ---- geometry -------------------------------------------------------- */
  --ds-radius: 4px;
  --ds-radius-lg: 8px;
  --ds-rail-w: 56px;
  --ds-topbar-h: 44px;

  /* ---- motion ---------------------------------------------------------- */
  --ds-t-fast: 120ms;
  --ds-t-base: 180ms;
  --ds-t-slow: 320ms;
  --ds-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --ds-z-rail: 40;
  --ds-z-topbar: 30;
  --ds-z-pop: 200;
  --ds-z-modal: 400;
}

/* Power users want more rows on screen than a mail client normally gives them. */
[data-density='compact'] {
  --ds-row-h: 26px;
  --ds-pad: 9px;
  --ds-pad-sm: 6px;
  --ds-gap: 8px;
  --ds-fs-md: 12px;
}

[data-density='ultra'] {
  --ds-row-h: 21px;
  --ds-pad: 6px;
  --ds-pad-sm: 4px;
  --ds-gap: 5px;
  --ds-fs-sm: 11px;
  --ds-fs-md: 11.5px;
  --ds-fs-lg: 12.5px;
}

/* Motion is purposeful, and entirely optional. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}