/* Systmize dark appearance (Q4, 17 Oct 2026) — the same file in systmize-landing
   (public/theme-dark.css) and systmize-web (app/theme-dark.css). Keep them identical.

   Light stays the generated tokens.css; dark only overrides the colour and shadow
   tokens, so every component follows without changes. Hand-written until the dark
   set is folded into brand/tokens.json (ops repo) and bin/sync-tokens.mjs.

   Which one applies:
   - html[data-theme='dark']                → dark (the visitor chose Dark)
   - html[data-theme='light']               → light (the visitor chose Light)
   - no data-theme (System, or no script)   → follows the operating system

   Contrast, measured on #131C2E surface: ink 14.4:1, slate 7.5:1, mute 4.5:1.
   action #3F7AEC is a compromise: white on it 4.0:1, it on surface 4.2:1 — one
   token serves both fills and links, so it sits between the two.

   --sy-color-deep: the navy of the device frames and the dark "saved" panels. In
   light it equals ink; in dark ink turns pale, so these keep their own value.
   --sy-color-deep-alt: the second tile colour for logo-less payments (light: slate). */

:root {
  --sy-color-deep: #0F1B33;
  --sy-color-deep-alt: #565F6C;
}

:root[data-theme='dark'] {
  --sy-color-ink: #E8ECF4;
  --sy-color-slate: #A3ADBD;
  --sy-color-mute: #7A8496;
  --sy-color-line: #243049;
  --sy-color-line-strong: #34415C;
  --sy-color-canvas: #0B1220;
  --sy-color-surface: #131C2E;
  --sy-color-surface-alt: #1B2539;
  --sy-color-signal: #4C84F0;
  --sy-color-action: #3F7AEC;
  --sy-color-sky: #8FB4FB;
  --sy-color-tint: #17264A;
  --sy-color-tint-deep: #1F3566;
  --sy-color-info-ink: #9DBDFB;
  --sy-color-on-signal: #FFFFFF;
  --sy-color-on-signal-mute: #DCE6FB;
  --sy-color-success: #2BC184;
  --sy-color-success-bg: #0F2A20;
  --sy-color-success-ink: #6EDDAE;
  --sy-color-warning: #F0B43A;
  --sy-color-danger: #F0646A;
  --sy-color-danger-bg: #3A1518;
  --sy-color-danger-ink: #FF9EA2;
  --sy-color-alert-bg: #3A2A0C;
  --sy-color-alert-ink: #F5C46B;
  --sy-shadow-card: 0 12px 28px rgba(0, 0, 0, 0.28);
  --sy-shadow-lift: 0 16px 36px rgba(0, 0, 0, 0.34);
  --sy-shadow-float: 0 30px 66px rgba(0, 0, 0, 0.45);
  --sy-shadow-device: 0 34px 70px rgba(0, 0, 0, 0.55);
  --sy-color-deep: #26334F;
  --sy-color-deep-alt: #46526A;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --sy-color-ink: #E8ECF4;
    --sy-color-slate: #A3ADBD;
    --sy-color-mute: #7A8496;
    --sy-color-line: #243049;
    --sy-color-line-strong: #34415C;
    --sy-color-canvas: #0B1220;
    --sy-color-surface: #131C2E;
    --sy-color-surface-alt: #1B2539;
    --sy-color-signal: #4C84F0;
    --sy-color-action: #3F7AEC;
    --sy-color-sky: #8FB4FB;
    --sy-color-tint: #17264A;
    --sy-color-tint-deep: #1F3566;
    --sy-color-info-ink: #9DBDFB;
    --sy-color-on-signal: #FFFFFF;
    --sy-color-on-signal-mute: #DCE6FB;
    --sy-color-success: #2BC184;
    --sy-color-success-bg: #0F2A20;
    --sy-color-success-ink: #6EDDAE;
    --sy-color-warning: #F0B43A;
    --sy-color-danger: #F0646A;
    --sy-color-danger-bg: #3A1518;
    --sy-color-danger-ink: #FF9EA2;
    --sy-color-alert-bg: #3A2A0C;
    --sy-color-alert-ink: #F5C46B;
    --sy-shadow-card: 0 12px 28px rgba(0, 0, 0, 0.28);
    --sy-shadow-lift: 0 16px 36px rgba(0, 0, 0, 0.34);
    --sy-shadow-float: 0 30px 66px rgba(0, 0, 0, 0.45);
    --sy-shadow-device: 0 34px 70px rgba(0, 0, 0, 0.55);
    --sy-color-deep: #26334F;
    --sy-color-deep-alt: #46526A;
    color-scheme: dark;
  }
}