/* Shared Email UI palette and spacing. Tailwind utilities use the same quarter-rem scale. */
:root {
  --color-accent: 27 54 93;
  --color-brand: 5 5 5;
  --color-surface: 245 247 250;
  --color-surface-soft: 238 242 247;
  --color-border: 203 213 225;
  --color-soft: 241 245 249;
  --color-muted: 51 65 85;
  --color-scrollbar: 148 163 184;
  --color-neutral: 203 213 225;
  --color-success: 16 185 129;
  --color-success-text: 4 120 87;
  --color-success-soft: 236 253 245;
  --border-width: 1px;
  --focus-width: 2px;
  --icon-border: 1.5px;
  --radius-full: 50%;
  --font-caption: 0.6875rem;
  --font-small: 0.75rem;
  --tracking-label: 0.04em;
  --content-width: 75rem;
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-22: 5.5rem;
  --space-48: 12rem;
  --space-5-5: 1.375rem;
}
[x-cloak] { display: none !important; }
:focus-visible { outline: var(--focus-width) solid rgb(var(--color-accent)); outline-offset: var(--focus-width); }
::selection { background: rgb(var(--color-accent) / .15); }
input, textarea { caret-color: rgb(var(--color-accent)); }