/* Phynxa Mail theme: the same tokens as the Phynxa dashboard (app/app/globals.css), so the webmail looks like the product.
   A test (tests/test_web_theme.py) fails if these drift from the dashboard's values. */
:root {
  color-scheme: light;

  --color-page: #f7f7f8;      /* soft grey page, white cards sit on it */
  --color-surface: #ffffff;
  --color-rule: #ececee;      /* hairline borders */
  --color-body: #18181b;
  --color-muted: #71717a;
  --color-faint: #a1a1aa;

  --color-signal: #18181b;    /* the accent in the dashboard: dark ink for buttons, links, focus */
  --color-signal-dark: #3f3f46;
  --color-signal-soft: #f4f4f5;
  --color-brand: #00806b;     /* the Phynxa green, used sparingly */

  --color-ok: #16a34a;
  --color-warning: #f97316;
  --color-alert: #dc2626;

  --radius-card: 1.375rem;
  --radius-small: 0.875rem;
  --radius-button: 0.75rem;
  --radius-input: 0.75rem;

  --font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Plus Jakarta Sans", "Figtree", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-body);
  font: 400 1rem/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.035em; line-height: 1.15; margin: 0; }

a { color: var(--color-signal); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--color-signal); outline-offset: 3px; border-radius: 4px; }