:root {
  --page: #eeeff4;
  --surface: #ffffff;
  --surface-muted: #f4f5fa;
  --surface-sunken: #fafafd;
  --border: #e4e6ef;
  --border-strong: #d6d9e6;
  --ink: #161a29;
  --ink-body: #242938;
  --ink-secondary: #40465c;
  --ink-muted: #5a6076;
  --ink-faint: #8b90a4;
  --accent: #5b6cf0;
  --accent-deep: #4453d8;
  --accent-soft: #b9c0fb;
  --accent-tint: #eef0ff;
  --accent-tint-border: #dfe3ff;
  --on-accent: #ffffff;
  --success: #23a87e;
  --success-tint: #eefaf5;
  --warn-deep: #8f5a0e;
  --warn-tint: #fff4e6;
  --danger-deep: #b03a49;
  --danger-tint: #fdecee;
  --grid: #e9ebf2;
  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;
  --shadow: 0 1px 2px rgba(22,26,41,.05), 0 8px 24px rgba(22,26,41,.06);
  --shadow-lg: 0 2px 6px rgba(22,26,41,.06), 0 24px 60px rgba(40,48,110,.14);
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #17181c;
    --surface: #1e1f24;
    --surface-muted: #2a2b31;
    --surface-sunken: #202127;
    --border: #2c2d34;
    --border-strong: #383941;
    --ink: #f7f8fa;
    --ink-body: #ebedf1;
    --ink-secondary: #c9ccd3;
    --ink-muted: #9a9ea8;
    --ink-faint: #71757f;
    --accent-deep: color-mix(in srgb, var(--accent) 55%, white);
    --accent-soft: color-mix(in srgb, var(--accent) 45%, #1e1f24);
    --accent-tint: color-mix(in srgb, var(--accent) 14%, transparent);
    --accent-tint-border: color-mix(in srgb, var(--accent) 30%, transparent);
    --success-tint: rgba(35,168,126,.14);
    --warn-deep: #f2b766;
    --warn-tint: rgba(242,163,60,.14);
    --danger-deep: #f38c98;
    --danger-tint: rgba(236,106,120,.14);
    --grid: #2c2d34;
    --s1: #3987e5;
    --s2: #d95926;
    --s3: #199e70;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
    --shadow-lg: 0 2px 6px rgba(0,0,0,.3), 0 24px 60px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #17181c;
  --surface: #1e1f24;
  --surface-muted: #2a2b31;
  --surface-sunken: #202127;
  --border: #2c2d34;
  --border-strong: #383941;
  --ink: #f7f8fa;
  --ink-body: #ebedf1;
  --ink-secondary: #c9ccd3;
  --ink-muted: #9a9ea8;
  --ink-faint: #71757f;
  --accent-deep: color-mix(in srgb, var(--accent) 55%, white);
  --accent-soft: color-mix(in srgb, var(--accent) 45%, #1e1f24);
  --accent-tint: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-tint-border: color-mix(in srgb, var(--accent) 30%, transparent);
  --success-tint: rgba(35,168,126,.14);
  --warn-deep: #f2b766;
  --warn-tint: rgba(242,163,60,.14);
  --danger-deep: #f38c98;
  --danger-tint: rgba(236,106,120,.14);
  --grid: #2c2d34;
  --s1: #3987e5;
  --s2: #d95926;
  --s3: #199e70;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.3), 0 24px 60px rgba(0,0,0,.45);
}

/* palette presets, same accents as the app's six themes */
:root[data-palette="violet"]   { --accent: #7c5cf5; }
:root[data-palette="ocean"]    { --accent: #3b82f6; }
:root[data-palette="sky"]      { --accent: #0ea5c9; }
:root[data-palette="grape"]    { --accent: #b44de0; }
:root[data-palette="graphite"] { --accent: #4b5366; }
:root[data-palette]:not([data-palette="indigo"]) {
  --accent-deep: color-mix(in srgb, var(--accent) 80%, #000);
  --accent-soft: color-mix(in srgb, var(--accent) 40%, var(--surface));
  --accent-tint: color-mix(in srgb, var(--accent) 9%, var(--surface));
  --accent-tint-border: color-mix(in srgb, var(--accent) 22%, var(--surface));
}