/* vzMail design tokens: "calm and airy". Each colour is written once as
   light-dark(light, dark): the theme follows the system unless the user
   picked one (data-theme on <html>, shell.js). Text colours meet WCAG 2.2
   AA (4.5:1) on every surface they sit on, including --accent-soft. */

@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --bg: light-dark(#f4f5f8, #0d0f13);
  --surface: light-dark(#ffffff, #14171d);
  --surface-2: light-dark(#f1f3f7, #1b1f27);
  --surface-3: light-dark(#e8ebf1, #232833);
  --text: light-dark(#15171c, #e6e8ee);
  --muted: light-dark(#596173, #a0a8b8);
  --faint: light-dark(#636b7c, #8a92a3);
  --border: light-dark(#e3e6ec, #252a34);
  --accent: light-dark(#3b5bdb, #8ca0ff);
  --accent-text: light-dark(#ffffff, #0d0f13);
  --accent-soft: light-dark(#e8edfd, #1d2440);
  --accent-ink: light-dark(#2f4ac2, #aebcff);
  --danger: light-dark(#c92a5a, #ff7aa2);
  --danger-text: light-dark(#ffffff, #0d0f13);
  --star: light-dark(#a87300, #ffc53d);
  --unread-dot: var(--accent);
  --scrim: light-dark(rgb(15 18 24 / 32%), rgb(0 0 0 / 50%));
  --toast-bg: light-dark(#1d2129, #2a303b);
  --toast-text: #f2f3f6;
  --toast-muted: #b8bdc8;
  --toast-action: #a9b8ff;
  --shadow-1: 0 1px 2px light-dark(rgb(16 24 40 / 6%), rgb(0 0 0 / 30%));
  --shadow-2: 0 1px 2px light-dark(rgb(16 24 40 / 6%), rgb(0 0 0 / 30%)), 0 10px 30px light-dark(rgb(16 24 40 / 8%), rgb(0 0 0 / 35%));
  --shadow-3: 0 2px 6px light-dark(rgb(16 24 40 / 10%), rgb(0 0 0 / 40%)), 0 24px 60px light-dark(rgb(16 24 40 / 18%), rgb(0 0 0 / 55%));
  --focus: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);

  --radius-s: 8px;
  --radius: 12px;
  --radius-l: 18px;

  --font-system: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font: var(--font-system);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;

  --row-pad: 14px;
  --row-gap: 4px;
  --sidebar: 248px;
  --list: 420px;
  --topbar: 64px;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

:root[data-density="compact"] {
  --row-pad: 7px;
  --row-gap: 0px;
}

:root[data-font="inter"] {
  --font: "Inter", var(--font-system);
  font-feature-settings: "cv11", "ss01";
}