/* Design tokens. Every colour, size and shadow in the app comes from here, so modules look native too. */
:root {
  color-scheme: light;

  /* Surfaces */
  --cm-bg: #f6f8fc;
  --cm-surface: #ffffff;
  --cm-surface-2: #f2f6fc;
  --cm-surface-hover: #f0f4f9;
  --cm-surface-raised: #ffffff;
  --cm-row-read: #f2f6fc;
  --cm-row-unread: #ffffff;
  --cm-row-selected: #c2dbff;
  --cm-row-cursor: #e8f0fe;
  --cm-scrim: rgba(32, 33, 36, .5);

  /* Text */
  --cm-text: #1f1f1f;
  --cm-text-2: #444746;
  --cm-text-3: #5e5e5e;
  --cm-text-on-primary: #ffffff;
  --cm-link: #0b57d0;

  /* Brand and states */
  --cm-primary: #0b57d0;
  --cm-primary-hover: #0a4fbf;
  --cm-primary-soft: #d3e3fd;
  --cm-compose: #c2e7ff;
  --cm-compose-hover: #b3dcf7;
  --cm-nav-active: #d3e3fd;
  --cm-nav-hover: #e9eef6;
  --cm-star: #f4b400;
  --cm-danger: #b3261e;
  --cm-danger-soft: #f9dedc;
  --cm-success: #146c2e;
  --cm-warning-soft: #fef7e0;
  --cm-focus: #0b57d0;

  /* Lines */
  --cm-border: #e0e3e7;
  --cm-border-strong: #c4c7c5;
  --cm-divider: #eceff1;

  /* Type */
  --cm-font: "Google Sans", Roboto, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --cm-font-text: Roboto, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --cm-font-mono: "Cascadia Mono", Consolas, "Roboto Mono", monospace;
  --cm-fs-xs: .75rem;
  --cm-fs-sm: .8125rem;
  --cm-fs-md: .875rem;
  --cm-fs-lg: 1.125rem;
  --cm-fs-xl: 1.375rem;

  /* Spacing (4px grid) */
  --cm-1: 4px;
  --cm-2: 8px;
  --cm-3: 12px;
  --cm-4: 16px;
  --cm-5: 20px;
  --cm-6: 24px;
  --cm-8: 32px;

  /* Shape and depth */
  --cm-radius-sm: 4px;
  --cm-radius: 8px;
  --cm-radius-lg: 16px;
  --cm-radius-pill: 999px;
  --cm-shadow-1: 0 1px 2px rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
  --cm-shadow-2: 0 1px 3px rgba(60, 64, 67, .3), 0 4px 8px 3px rgba(60, 64, 67, .15);
  --cm-shadow-3: 0 4px 4px rgba(60, 64, 67, .3), 0 8px 12px 6px rgba(60, 64, 67, .15);
  --cm-row-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);

  /* Layout */
  --cm-topbar-h: 64px;
  --cm-sidebar-w: 256px;
  --cm-sidebar-rail: 72px;
  --cm-row-h: 40px;
  --cm-ease: cubic-bezier(.2, 0, 0, 1);
  --cm-fast: 120ms;
  --cm-medium: 200ms;
}

[data-density="compact"] {
  --cm-row-h: 32px;
  --cm-topbar-h: 56px;
}

/* Dark theme: explicit choice, or "system" when the OS prefers dark. Works on <html> or any subtree. */
[data-theme="dark"] {
  color-scheme: dark;
  --cm-bg: #111214;
  --cm-surface: #1e1f20;
  --cm-surface-2: #1a1b1c;
  --cm-surface-hover: #2a2b2d;
  --cm-surface-raised: #28292a;
  --cm-row-read: #1a1b1c;
  --cm-row-unread: #232426;
  --cm-row-selected: #0b3d75;
  --cm-row-cursor: #26303d;
  --cm-scrim: rgba(0, 0, 0, .6);
  --cm-text: #e3e3e3;
  --cm-text-2: #c4c7c5;
  --cm-text-3: #a8abaf;
  --cm-text-on-primary: #062e6f;
  --cm-link: #a8c7fa;
  --cm-primary: #a8c7fa;
  --cm-primary-hover: #bcd4fb;
  --cm-primary-soft: #0b3d75;
  --cm-compose: #004a77;
  --cm-compose-hover: #075a8f;
  --cm-nav-active: #004a77;
  --cm-nav-hover: #2a2b2d;
  --cm-danger: #f2b8b5;
  --cm-danger-soft: #601410;
  --cm-success: #6dd58c;
  --cm-warning-soft: #3d3215;
  --cm-focus: #a8c7fa;
  --cm-border: #3c3d3f;
  --cm-border-strong: #5f6368;
  --cm-divider: #2e2f31;
  --cm-shadow-1: 0 1px 2px rgba(0, 0, 0, .6), 0 1px 3px 1px rgba(0, 0, 0, .3);
  --cm-shadow-2: 0 1px 3px rgba(0, 0, 0, .6), 0 4px 8px 3px rgba(0, 0, 0, .3);
  --cm-shadow-3: 0 4px 4px rgba(0, 0, 0, .6), 0 8px 12px 6px rgba(0, 0, 0, .3);
  --cm-row-shadow: inset 1px 0 0 #3c3d3f, inset -1px 0 0 #3c3d3f, 0 1px 3px rgba(0, 0, 0, .6);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --cm-bg: #111214;
    --cm-surface: #1e1f20;
    --cm-surface-2: #1a1b1c;
    --cm-surface-hover: #2a2b2d;
    --cm-surface-raised: #28292a;
    --cm-row-read: #1a1b1c;
    --cm-row-unread: #232426;
    --cm-row-selected: #0b3d75;
    --cm-row-cursor: #26303d;
    --cm-scrim: rgba(0, 0, 0, .6);
    --cm-text: #e3e3e3;
    --cm-text-2: #c4c7c5;
    --cm-text-3: #a8abaf;
    --cm-text-on-primary: #062e6f;
    --cm-link: #a8c7fa;
    --cm-primary: #a8c7fa;
    --cm-primary-hover: #bcd4fb;
    --cm-primary-soft: #0b3d75;
    --cm-compose: #004a77;
    --cm-compose-hover: #075a8f;
    --cm-nav-active: #004a77;
    --cm-nav-hover: #2a2b2d;
    --cm-danger: #f2b8b5;
    --cm-danger-soft: #601410;
    --cm-success: #6dd58c;
    --cm-warning-soft: #3d3215;
    --cm-focus: #a8c7fa;
    --cm-border: #3c3d3f;
    --cm-border-strong: #5f6368;
    --cm-divider: #2e2f31;
    --cm-shadow-1: 0 1px 2px rgba(0, 0, 0, .6), 0 1px 3px 1px rgba(0, 0, 0, .3);
    --cm-shadow-2: 0 1px 3px rgba(0, 0, 0, .6), 0 4px 8px 3px rgba(0, 0, 0, .3);
    --cm-shadow-3: 0 4px 4px rgba(0, 0, 0, .6), 0 8px 12px 6px rgba(0, 0, 0, .3);
    --cm-row-shadow: inset 1px 0 0 #3c3d3f, inset -1px 0 0 #3c3d3f, 0 1px 3px rgba(0, 0, 0, .6);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --cm-fast: 0ms;
    --cm-medium: 0ms;
  }
}