/*
 * Design tokens. MailLogic's palette: the primary teal and the light/dark
 * values follow the Box consent page (service/box/static/consent.css), which
 * takes them from MailLogic's own styles. Dark mode follows the system
 * setting, as there.
 */
:root {
  color-scheme: light dark;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;

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

  --topbar-h: 56px;
  --sidebar-w: 240px;
  --list-w: 400px;

  /* Surfaces */
  --bg: #ffffff;
  --bg-app: #f6f7f9;
  --bg-raised: #ffffff;
  --bg-hover: #eef1f4;
  --bg-active: #e7f3f1;
  --bg-skeleton: #eceef1;

  /* Text */
  --fg: #1d1d1f;
  --fg-muted: #5f6368;
  --fg-subtle: #6b7076;

  /* Lines */
  --line: #e4e7eb;
  --line-strong: #d0d4d9;

  /* MailLogic teal */
  --accent: #0f766e;
  --accent-strong: #115e59;
  --on-accent: #ffffff;
  --accent-soft: #e7f3f1;
  --accent-text: #0f766e;
  --focus: #0f766e;
  --focus-ring: rgb(15 118 110 / 22%);

  --danger: #b42318;
  --danger-strong: #912018;
  --danger-soft: #fdeceb;
  --warning-bg: #fff6e5;
  --warning-fg: #7a4500;
  --star: #b7791f;
  --unread: #0f766e;

  --toast-bg: #202124;
  --toast-fg: #f4f5f7;
  --toast-action: #5eead4;

  --shadow-sm: 0 1px 2px rgb(16 24 40 / 6%);
  --shadow-md: 0 6px 20px rgb(16 24 40 / 12%), 0 1px 3px rgb(16 24 40 / 8%);
  --shadow-lg: 0 16px 48px rgb(16 24 40 / 18%), 0 2px 6px rgb(16 24 40 / 10%);

  /* Avatar colors (by domain or sender) */
  --hue-0-bg: #d7f0ec;
  --hue-0-fg: #0b5e57;
  --hue-1-bg: #dce7fb;
  --hue-1-fg: #1d4f9e;
  --hue-2-bg: #e8e1fa;
  --hue-2-fg: #5b3cb0;
  --hue-3-bg: #fbecd2;
  --hue-3-fg: #7f4c00;
  --hue-4-bg: #fae0e4;
  --hue-4-fg: #a3243b;
  --hue-5-bg: #e2e6eb;
  --hue-5-fg: #3d4652;

  /* Attachment kinds */
  --kind-pdf: #c0362c;
  --kind-img: #6d4ac7;
  --kind-doc: #2b5fb8;
  --kind-xls: #1f7a46;
  --kind-ppt: #c2581b;
  --kind-zip: #8a6100;
  --kind-ics: #0f766e;
  --kind-txt: #56606b;
  --kind-file: #56606b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16171a;
    --bg-app: #111214;
    --bg-raised: #1e2024;
    --bg-hover: #23262b;
    --bg-active: rgb(94 234 212 / 11%);
    --bg-skeleton: #24272c;

    --fg: #ececf1;
    --fg-muted: #a0a4ab;
    --fg-subtle: #90949b;

    --line: #2a2d33;
    --line-strong: #3a3d44;

    --accent: #5eead4;
    --accent-strong: #2dd4bf;
    --on-accent: #07110e;
    --accent-soft: rgb(94 234 212 / 11%);
    --accent-text: #5eead4;
    --focus: #5eead4;
    --focus-ring: rgb(94 234 212 / 22%);

    --danger: #f97066;
    --danger-strong: #fda29b;
    --danger-soft: rgb(249 112 102 / 14%);
    --warning-bg: rgb(250 176 5 / 12%);
    --warning-fg: #fcd34d;
    --star: #fbbf24;
    --unread: #5eead4;

    --toast-bg: #ececf1;
    --toast-fg: #16171a;
    --toast-action: #0f766e;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-md: 0 6px 20px rgb(0 0 0 / 45%), 0 1px 3px rgb(0 0 0 / 40%);
    --shadow-lg: 0 16px 48px rgb(0 0 0 / 55%), 0 2px 6px rgb(0 0 0 / 40%);

    --hue-0-bg: rgb(94 234 212 / 16%);
    --hue-0-fg: #7ee8d6;
    --hue-1-bg: rgb(125 170 255 / 16%);
    --hue-1-fg: #a8c5ff;
    --hue-2-bg: rgb(167 139 250 / 16%);
    --hue-2-fg: #c4b5fd;
    --hue-3-bg: rgb(251 191 36 / 14%);
    --hue-3-fg: #fcd34d;
    --hue-4-bg: rgb(251 113 133 / 15%);
    --hue-4-fg: #fda4af;
    --hue-5-bg: rgb(160 164 171 / 16%);
    --hue-5-fg: #c7cad0;

    --kind-pdf: #f97066;
    --kind-img: #b8a4f6;
    --kind-doc: #8fb3ff;
    --kind-xls: #6fd39b;
    --kind-ppt: #f6a56b;
    --kind-zip: #f2c55c;
    --kind-ics: #5eead4;
    --kind-txt: #a0a4ab;
    --kind-file: #a0a4ab;
  }
}