/* Synaply app theme — one token sheet for every surface.
 *
 * Values mirror synaply.io (marketing repo, src/app/globals.css). The
 * `--md-sys-color-*` names are kept because ~150 components consume them
 * through the tailwind aliases (bg-surface, text-on-surface, …); only the
 * values changed. `--syn-*` are the marketing names for new chrome code.
 *
 * Keyed on [data-mode] only. [data-app] no longer changes the palette — it
 * only sets `--app-tint`, the one place per-app colour survives.
 */

:root, [data-mode="light"] {
  --syn-ink: #0e1116;
  --syn-ink-2: #59616f;
  --syn-ink-3: #8a919e;
  --syn-paper: #ffffff;
  --syn-wash: #f6f7f9;
  --syn-wash-2: #eef0f4;
  --syn-line: rgba(14, 17, 22, 0.11);
  --syn-line-soft: rgba(14, 17, 22, 0.06);
  --syn-brand: #1d5fd8;
  --syn-brand-deep: #17429b;
  --syn-brand-grad: linear-gradient(100deg, #1d5fd8, #7c5ce0);
  --syn-ok: #0e7a4e;
  --syn-bad: #b42323;
  --syn-wait: #8a5000;
  --syn-manual: #3b3fb8;
  --syn-mist: #eff6fe;
  --syn-mint: #edf8f2;
  --syn-lilac: #f4f0fd;
  --syn-blush: #fdf1f7;
  --syn-sand: #f8f4ec;
  --syn-shadow-lift: 0 1px 2px rgba(14, 17, 22, 0.05), 0 12px 28px -22px rgba(14, 17, 22, 0.45);
  --syn-shadow-pop: 0 1px 2px rgba(14, 17, 22, 0.06), 0 16px 40px -18px rgba(14, 17, 22, 0.35);

  --md-sys-color-primary: #1d5fd8;
  --md-sys-color-surface-tint: #1d5fd8;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #eff6fe;
  --md-sys-color-on-primary-container: #17429b;
  --md-sys-color-secondary: #59616f;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #eef0f4;
  --md-sys-color-on-secondary-container: #0e1116;
  --md-sys-color-tertiary: #3b3fb8;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #f4f0fd;
  --md-sys-color-on-tertiary-container: #2a2d86;
  --md-sys-color-error: #b42323;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #fbeaea;
  --md-sys-color-on-error-container: #7a1717;
  --md-sys-color-background: #ffffff;
  --md-sys-color-on-background: #0e1116;
  --md-sys-color-surface: #ffffff;
  --md-sys-color-on-surface: #0e1116;
  --md-sys-color-surface-variant: #eef0f4;
  --md-sys-color-on-surface-variant: #59616f;
  --md-sys-color-outline: #8a919e;
  --md-sys-color-outline-variant: rgba(14, 17, 22, 0.11);
  --md-sys-color-outline-variant-rgb: 14 17 22;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  --md-sys-color-inverse-surface: #0e1116;
  --md-sys-color-inverse-on-surface: #edeef1;
  --md-sys-color-inverse-primary: #6f9dfb;
  --md-sys-color-primary-fixed: #eff6fe;
  --md-sys-color-on-primary-fixed: #17429b;
  --md-sys-color-primary-fixed-dim: #c7dafb;
  --md-sys-color-on-primary-fixed-variant: #17429b;
  --md-sys-color-secondary-fixed: #eef0f4;
  --md-sys-color-on-secondary-fixed: #0e1116;
  --md-sys-color-secondary-fixed-dim: #dfe3e9;
  --md-sys-color-on-secondary-fixed-variant: #59616f;
  --md-sys-color-tertiary-fixed: #f4f0fd;
  --md-sys-color-on-tertiary-fixed: #2a2d86;
  --md-sys-color-tertiary-fixed-dim: #d9d4f7;
  --md-sys-color-on-tertiary-fixed-variant: #3b3fb8;
  --md-sys-color-surface-dim: #eef0f4;
  --md-sys-color-surface-bright: #ffffff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f6f7f9;
  --md-sys-color-surface-container: #eef0f4;
  --md-sys-color-surface-container-high: #e6e9ee;
  --md-sys-color-surface-container-highest: #dfe3e9;
}

[data-mode="dark"] {
  color-scheme: dark;
  --syn-ink: #edeef1;
  --syn-ink-2: #a7aebb;
  --syn-ink-3: #7f8794;
  --syn-paper: #0e1116;
  --syn-wash: #161a21;
  --syn-wash-2: #1c212a;
  --syn-line: rgba(237, 238, 241, 0.12);
  --syn-line-soft: rgba(237, 238, 241, 0.07);
  --syn-brand: #6f9dfb;
  --syn-brand-deep: #a8c3fd;
  --syn-brand-grad: linear-gradient(100deg, #6f9dfb, #a58cf5);
  --syn-ok: #3fbf86;
  --syn-bad: #e06b6b;
  --syn-wait: #d9a24a;
  --syn-manual: #8b8ff0;
  --syn-mist: #111a2b;
  --syn-mint: #0f1d17;
  --syn-lilac: #181428;
  --syn-blush: #231320;
  --syn-sand: #1f1b14;
  --syn-shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 28px -22px rgba(0, 0, 0, 0.9);
  --syn-shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 40px -18px rgba(0, 0, 0, 0.8);

  --md-sys-color-primary: #6f9dfb;
  --md-sys-color-surface-tint: #6f9dfb;
  --md-sys-color-on-primary: #0e1116;
  --md-sys-color-primary-container: #111a2b;
  --md-sys-color-on-primary-container: #a8c3fd;
  --md-sys-color-secondary: #98a1b0;
  --md-sys-color-on-secondary: #0e1116;
  --md-sys-color-secondary-container: #1c212a;
  --md-sys-color-on-secondary-container: #edeef1;
  --md-sys-color-tertiary: #8b8ff0;
  --md-sys-color-on-tertiary: #0e1116;
  --md-sys-color-tertiary-container: #181428;
  --md-sys-color-on-tertiary-container: #c9cbff;
  --md-sys-color-error: #e06b6b;
  --md-sys-color-on-error: #0e1116;
  --md-sys-color-error-container: #2a1414;
  --md-sys-color-on-error-container: #f5b5b5;
  --md-sys-color-background: #0e1116;
  --md-sys-color-on-background: #edeef1;
  --md-sys-color-surface: #0e1116;
  --md-sys-color-on-surface: #edeef1;
  --md-sys-color-surface-variant: #1c212a;
  --md-sys-color-on-surface-variant: #98a1b0;
  --md-sys-color-outline: #7f8794;
  --md-sys-color-outline-variant: rgba(237, 238, 241, 0.12);
  --md-sys-color-outline-variant-rgb: 237 238 241;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  --md-sys-color-inverse-surface: #edeef1;
  --md-sys-color-inverse-on-surface: #0e1116;
  --md-sys-color-inverse-primary: #1d5fd8;
  --md-sys-color-primary-fixed: #111a2b;
  --md-sys-color-on-primary-fixed: #a8c3fd;
  --md-sys-color-primary-fixed-dim: #1b2a45;
  --md-sys-color-on-primary-fixed-variant: #a8c3fd;
  --md-sys-color-secondary-fixed: #1c212a;
  --md-sys-color-on-secondary-fixed: #edeef1;
  --md-sys-color-secondary-fixed-dim: #232935;
  --md-sys-color-on-secondary-fixed-variant: #98a1b0;
  --md-sys-color-tertiary-fixed: #181428;
  --md-sys-color-on-tertiary-fixed: #c9cbff;
  --md-sys-color-tertiary-fixed-dim: #221c3a;
  --md-sys-color-on-tertiary-fixed-variant: #8b8ff0;
  --md-sys-color-surface-dim: #0a0d11;
  --md-sys-color-surface-bright: #1c212a;
  --md-sys-color-surface-container-lowest: #0a0d11;
  --md-sys-color-surface-container-low: #161a21;
  --md-sys-color-surface-container: #1c212a;
  --md-sys-color-surface-container-high: #232935;
  --md-sys-color-surface-container-highest: #2a313e;
}

/* Per-app accent. The only thing [data-app] still controls. */
[data-app="base"]     { --app-tint: #1d5fd8; }
[data-app="insights"] { --app-tint: #2563eb; }
[data-app="memory"]   { --app-tint: #ec4899; }
[data-app="network"]  { --app-tint: #0e7a4e; }
[data-app="pages"]    { --app-tint: #8a5000; }
[data-mode="dark"][data-app="network"] { --app-tint: #3fbf86; }