/* AltarNews design tokens.
   Derived from AltarSuite design guide v0.2: palettes (pages 05-06),
   type scale (page 08), and layout rules (page 09).
   The app chrome uses these. The newsletter canvas inside the editor
   deliberately does NOT - see guide page 19. */

:root {
  color-scheme: dark;

  /* Dark palette - guide page 05 */
  --bg: #0B1220;
  --surface: #121E32;
  --raised: #1A2A43;
  --border: #34465F;
  --control-border: #6D819E;
  --text: #F4F7FC;
  --muted: #ACBCD2;
  --action: #9BBEFF;
  --on-action: #0B1220;
  --action-hover: #B4CEFF;
  --link: #9BBEFF;
  --focus: #E9C88F;
  --success: #80D6B4;
  --warning: #E9C88F;
  --danger: #FFA8B2;
  --brand-gold: #E9C88F;

  --font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* 4px base scale - guide page 09 */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-6: 24px; --space-8: 32px;  --space-12: 48px; --space-16: 64px;

  /* App type scale - guide page 08. Distinct from the marketing hero scale. */
  --text-page: 32px;    --leading-page: 40px;
  --text-section: 24px; --leading-section: 32px;
  --text-card: 18px;    --leading-card: 26px;
  --text-body: 16px;    --leading-body: 24px;
  --text-label: 14px;   --leading-label: 20px;
  --text-caption: 12px; --leading-caption: 18px;

  --radius-control: 8px;
  --radius-card: 12px;
  --radius-dialog: 16px;

  --control-height: 44px;
  --sidebar-width: 240px;
  --header-height: 64px;
  --content-max: 1200px;
  --form-max: 640px;
}

/* Light palette - guide page 06. Matches design/altarsuite-tokens.css.
   Note: website/style.css uses a warmer light theme and is the outlier. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    color-scheme: light;
    --bg: #F4F7FC; --surface: #FFFFFF; --raised: #EAF0F9;
    --border: #CDD7E5; --control-border: #66768F;
    --text: #14213A; --muted: #53657D;
    --action: #265DCC; --on-action: #FFFFFF; --action-hover: #1F4EAD;
    --link: #265DCC; --focus: #265DCC;
    --success: #176B50; --warning: #79520F; --danger: #AE2940;
    --brand-gold: #79520F;
  }
}
:root[data-theme='light'] {
  color-scheme: light;
  --bg: #F4F7FC; --surface: #FFFFFF; --raised: #EAF0F9;
  --border: #CDD7E5; --control-border: #66768F;
  --text: #14213A; --muted: #53657D;
  --action: #265DCC; --on-action: #FFFFFF; --action-hover: #1F4EAD;
  --link: #265DCC; --focus: #265DCC;
  --success: #176B50; --warning: #79520F; --danger: #AE2940;
  --brand-gold: #79520F;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--text-body)/var(--leading-body) var(--font);
}
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
}