/* Reveille design tokens.

   Two palettes, each with a light and a dark mode. The document root carries
   data-palette="daybreak" | "ink" and data-theme="light" | "dark"; the theme helper in
   src/lib/theme.ts sets both (resolving "match system" to one of the two modes) before the
   application paints. The bare :root block is Daybreak light, so a page without those
   attributes still renders correctly.

   Components use only the semantic tokens (--color-accent, --color-alert, --color-surface…).
   No component names a palette or a hex value. Supplied raster portraits and client logos
   keep their own colors; the Reveille marks are single-color masks painted with --color-logo.

   Daybreak: cool graphite neutrals, sea-teal accent, crimson attention.
   Ink: near-black on white, emerald accent, crimson attention, blue links. */
:root {
  /* DS5.3: night and dawn scenes retain these colours in every appearance. */
  --color-night: #0f141b;
  --color-night-text: #eef2f6;
  --color-night-muted: #b4bfcc;
  --color-night-pixel: #3fc1ba;
  --color-night-star: #7bdad4;
  --color-dawn-horizon: #1d2a38;
  --color-dawn-sun: #f2b544;
  --color-dawn-sun-deep: #e08a2c;
  color-scheme: light;
  /* Daybreak · light */
  --color-shell: #f5f6f8;
  --color-masthead-light: #ffffff;
  --color-masthead-dark: #0f141b;
  --color-masthead: var(--color-masthead-light);
  --color-masthead-rule: #1b2330;
  --color-logo: #1b2330;
  --color-sidebar: #eef0f3;
  --color-canvas: #f5f6f8;
  --color-surface: #ffffff;
  --color-surface-raised: #eef0f3;
  --color-surface-hover: #e6e9ee;
  --color-input: #ffffff;
  --color-text: #1b2330;
  --color-text-muted: #5c6674;
  --color-text-subtle: #6b7482;
  --color-border: #cfd5dd;
  --color-control-border: #a9b2be;
  --color-divider: #e3e7ec;
  --color-accent: #0f8f8a;
  --color-primary: #0c7f7a;
  --color-accent-text: #0b6f6b;
  --color-accent-contrast: #ffffff;
  --color-alert: #d3263a;
  --color-link: #0b6f6b;
  --color-success: #2f8a67;
  /* Approved first-sign-in categorical sequence, shared across palettes. */
  --color-chart-1: #3987e5;
  --color-chart-2: #d95926;
  --color-chart-3: #199e70;
  --color-chart-4: #c98500;
  --color-chart-5: #d55181;
  --color-chart-6: #9085e9;
  --color-chart-other: #6b7177;
  /* Provider marks in the approved Gmail/Quo source lanes keep brand colours. */
  --color-source-gmail: #1967d2;
  --color-source-gmail-surface: #ffffff;
  --color-source-quo: #5b5bd6;
  --color-source-quo-text: #ffffff;
  --color-primary-text: var(--color-accent-contrast);
  --color-primary-hover: #0b6f6b;
  --color-primary-hover-text: #ffffff;
  --color-selected-surface: #ddf3f1;
  --color-selected-border: var(--color-accent);
  --color-focus: var(--color-primary);
  --color-unread: var(--color-alert);
  --color-success-text: var(--color-text);
  --color-success-surface: var(--color-surface-raised);
  --color-attention: #946200;
  --color-warning-text: var(--color-text);
  --color-warning-surface: var(--color-surface-raised);
  --color-danger-text: var(--color-text);
  --color-danger-surface: var(--color-surface-raised);
  --color-info-text: var(--color-text);
  --color-info-surface: var(--color-surface-raised);
  --color-draft-text: var(--color-text);
  --color-draft-surface: var(--color-surface-raised);
  --color-disabled-text: #8a929e;
  --color-disabled-surface: #e6e9ee;
  --color-scrim: rgb(27 35 48 / 55%);
  --color-transparent: transparent;
  --color-document-paper: #ffffff;
  --color-document-ink: #1b2330;
  --color-document-muted: #5c6674;
  --color-document-border: #cfd5dd;
  --color-document-panel: #eef0f3;
  /* Preview both modes of the active palette, regardless of the current mode. */
  --color-logo-preview-dark: var(--color-masthead-dark);
  --color-logo-preview-light: var(--color-masthead-light);
  --shadow-dialog: 0 20px 64px rgb(27 35 48 / 18%);
  --shadow-tab-active: inset 0 -2px 0 var(--color-accent);
  --shadow-phone-nav-active: inset 0 2px 0 var(--color-accent);
  --shadow-row-selected: inset 3px 0 var(--color-selected-border);
  --shadow-field-focus: 0 0 0 3px color-mix(in srgb, var(--color-accent) 25%, transparent);
  --shadow-sorting-glow: 0 0 28px color-mix(in srgb, var(--color-accent) 30%, transparent);
  --shadow-document-edge: 0 1px 0 var(--color-divider);
  --shadow-stage-current: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent);
  --shadow-ring-2: 0 0 0 2px;
  --shadow-drop-before: 0 -3px 0 var(--color-accent);
  --shadow-context-row-selected: inset 0 -3px 0 var(--color-accent);
  --font-ui:
    "Figtree", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --font-display-pixel: "Jersey 15", monospace;
  --text-stat: 3.5rem;
  --line-stat: 1;
  --text-page: 1.75rem;
  --line-page: 2.125rem;
  --text-section: 1.375rem;
  --line-section: 1.75rem;
  --text-heading: 1.125rem;
  --line-heading: 1.5rem;
  --text-body: 1rem;
  --line-body: 1.5;
  --text-ui: 0.875rem;
  --line-ui: 1.25rem;
  --text-meta: 0.8125rem;
  --line-meta: 1.125rem;
  --text-micro: 0.75rem;
  --line-micro: 1rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --radius-none: 0;
  --radius-graphic-2: 2px;
  --radius-graphic-3: 3px;
  --radius-graphic-4: 4px;
  --radius-small: 6px;
  --radius-card: 8px;
  --radius-dialog: 12px;
  --radius-pill: 999px;
  --border-width: 1px;
  --control-height: 44px;
  --glyph-group-size: 9px;
  --avatar-card: 64px;
  --avatar-author: 40px;
  --avatar-compact: 32px;
  --sidebar-wide: 320px;
  --sidebar-medium: 272px;
  --masthead-height: 68px;
  --profile-card-min-height: 104px;
  /* The masthead and every page use the whole window, inside one gutter that grows a little on
     wide screens (UI redesign decision 72, which replaces 71's 1760px width). Wide screens add
     columns instead of stretching a single one; running text keeps --reading-width. */
  --page-gutter: clamp(24px, 2vw, 48px);
  /* Running text inside a page stays readable at any page width. */
  --reading-width: 72ch;
  --dialog-width: 640px;
  --z-sticky: 20;
  --z-drawer: 40;
  --z-modal: 60;
}

@media (max-width: 767px) {
  :root {
    --text-page: 1.5rem;
    --line-page: 1.875rem;
  }
}

/* Daybreak · dark */
:root[data-palette="daybreak"][data-theme="dark"],
:root:not([data-palette])[data-theme="dark"] {
  color-scheme: dark;
  --color-shell: #0f141b;
  --color-masthead: var(--color-masthead-dark);
  --color-masthead-rule: #3a4553;
  --color-logo: #eef2f6;
  --color-sidebar: #171e27;
  --color-canvas: #131921;
  --color-surface: #171e27;
  --color-surface-raised: #202934;
  --color-surface-hover: #28323f;
  --color-input: #131921;
  --color-text: #eef2f6;
  --color-text-muted: #9aa6b4;
  --color-text-subtle: #8792a0;
  --color-border: #3a4553;
  --color-control-border: #55637a;
  --color-divider: #26303b;
  --color-accent: #3fc1ba;
  --color-primary: var(--color-accent);
  --color-accent-text: #7bdad4;
  --color-accent-contrast: #0f141b;
  --color-alert: #ff6b7a;
  --color-attention: #fbbf24;
  --color-link: #7bdad4;
  --color-success: #6fc59c;
  --color-primary-hover: #7bdad4;
  --color-primary-hover-text: #0f141b;
  --color-selected-surface: #123f3d;
  --color-disabled-text: #6f7a89;
  --color-disabled-surface: #202934;
  --color-scrim: rgb(0 0 0 / 64%);
  --color-document-paper: #171e27;
  --color-document-ink: #eef2f6;
  --color-document-muted: #9aa6b4;
  --color-document-border: #3a4553;
  --color-document-panel: #202934;
  --shadow-dialog: 0 20px 64px rgb(0 0 0 / 42%);
}

/* Ink · light */
:root[data-palette="ink"] {
  color-scheme: light;
  --color-shell: #fafafa;
  --color-masthead-dark: #111214;
  --color-masthead: var(--color-masthead-light);
  --color-masthead-rule: #151719;
  --color-logo: #151719;
  --color-sidebar: #f1f1f0;
  --color-canvas: #fafafa;
  --color-surface: #ffffff;
  --color-surface-raised: #f1f1f0;
  --color-surface-hover: #e9e9e8;
  --color-input: #ffffff;
  --color-text: #151719;
  --color-text-muted: #5f6469;
  --color-text-subtle: #6d7278;
  --color-border: #d3d5d8;
  --color-control-border: #a8acb2;
  --color-divider: #e6e7e9;
  --color-accent: #0f9d6e;
  --color-primary: #0c8460;
  --color-accent-text: #0b7a56;
  --color-accent-contrast: #ffffff;
  --color-alert: #d7263d;
  --color-link: #1f6fb2;
  --color-success: #0f9d6e;
  --color-primary-hover: #0b7a56;
  --color-primary-hover-text: #ffffff;
  --color-selected-surface: #dcf3ea;
  --color-disabled-text: #8c9096;
  --color-disabled-surface: #e9e9e8;
  --color-scrim: rgb(21 23 25 / 55%);
  --color-document-paper: #ffffff;
  --color-document-ink: #151719;
  --color-document-muted: #5f6469;
  --color-document-border: #d3d5d8;
  --color-document-panel: #f1f1f0;
  --shadow-dialog: 0 20px 64px rgb(21 23 25 / 18%);
}

/* Ink · dark */
:root[data-palette="ink"][data-theme="dark"] {
  color-scheme: dark;
  --color-shell: #111214;
  --color-masthead: var(--color-masthead-dark);
  --color-masthead-rule: #3b4046;
  --color-logo: #f2f3f4;
  --color-sidebar: #1a1c1f;
  --color-canvas: #151719;
  --color-surface: #1a1c1f;
  --color-surface-raised: #232629;
  --color-surface-hover: #2c3034;
  --color-input: #151719;
  --color-text: #f2f3f4;
  --color-text-muted: #9aa0a6;
  --color-text-subtle: #878d94;
  --color-border: #3b4046;
  --color-control-border: #5a6068;
  --color-divider: #282c30;
  --color-accent: #34d399;
  --color-primary: var(--color-accent);
  --color-accent-text: #6ee7b7;
  --color-accent-contrast: #111214;
  --color-alert: #ff6b7a;
  --color-attention: #fbbf24;
  --color-link: #7fb8ee;
  --color-success: #34d399;
  --color-primary-hover: #6ee7b7;
  --color-primary-hover-text: #111214;
  --color-selected-surface: #123d2e;
  --color-disabled-text: #6f757c;
  --color-disabled-surface: #232629;
  --color-scrim: rgb(0 0 0 / 64%);
  --color-document-paper: #1a1c1f;
  --color-document-ink: #f2f3f4;
  --color-document-muted: #9aa0a6;
  --color-document-border: #3b4046;
  --color-document-panel: #232629;
  --shadow-dialog: 0 20px 64px rgb(0 0 0 / 42%);
}