/* Design tokens for every theme.
   Components in app.css read only these semantic names. A theme is a block of values selected by attributes
   on <html>, or on any preview element: data-theme, data-mode, data-base (shadcn gray), data-accent, plus the
   --radius custom property. Every theme block declares the full semantic set, so a preview of one theme nested
   inside a page running another never inherits a stray value. */

/* Derived scales live wherever a theme is set, so a nested preview recomputes them from its own --radius.
   The radius scale follows shadcn/ui: sm 0.6×, md 0.8×, lg 1×, xl 1.4×, 2xl 1.8×. */
:root, [data-theme] {
  --r-sm: calc(var(--radius) * .6);
  --r-md: calc(var(--radius) * .8);
  --r-lg: var(--radius);
  --r-xl: calc(var(--radius) * 1.4);
  --r-2xl: calc(var(--radius) * 1.8);
  --ring-soft: color-mix(in oklab, var(--ring) var(--ring-alpha), transparent);
}
:root { --radius: .5rem; }

/* Density. Comfortable is the default; compact trades whitespace for rows on screen. */
:root, [data-density] {
  --fs: 14px; --lh: 20px; --top-h: 56px; --ctl-h: 36px; --ctl-sm: 32px;
  --row-h: 92px; --nav-h: 36px; --nav-h-sm: 32px;
}
[data-density="compact"] {
  --fs: 13px; --lh: 18px; --top-h: 48px; --ctl-h: 32px; --ctl-sm: 28px;
  --row-h: 72px; --nav-h: 30px; --nav-h-sm: 28px;
}

/* ── AnyApp: brand blue, Inter, cool grays ───────────────────────────────────── */
:root, [data-theme="anyapp"] {
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --bg: #F4F5F7; --surface: #FFFFFF; --surface-2: #FAFBFC; --card: #FFFFFF; --elevated: #FFFFFF;
  --subtle: #F1F3F5; --hover: #EEF1F5; --active: var(--primary-soft);
  --fg: #1F1F1F; --fg-2: #3D4350; --fg-3: #4A5160; --fg-muted: #5F6672;
  --border: #E4E6EA; --border-strong: #D5D9E0; --input: #D5D9E0;

  --primary: #006AD9; --primary-hover: #005BBB; --primary-fg: #FFFFFF;
  --primary-soft: #E8F2FF; --primary-soft-fg: #0B4F9C;
  --ring: #006AD9; --ring-alpha: 18%;
  --focus-w: 2px; --focus-c: var(--ring); --focus-o: 2px;

  --danger: #A3261B; --danger-solid: #D92D20; --danger-soft: #FDECEC;
  --warn: #7A4300; --warn-soft: #FFF4E0;
  --ok: #17663A; --ok-solid: #1F9D55; --ok-soft: #EAF7EF;
  --snooze: #3B3FA0; --snooze-solid: #5B5FC7; --snooze-soft: #EEF0FF;
  --label: #4E2A9E; --label-soft: #F3EEFF; --label-border: transparent;
  --sample: #7A4300; --sample-soft: #FFF1D6;
  --unread: #C2410C; --unread-line: #F5B48A; --draft: #B54708;
  --note-bg: #FFF8E1; --note-border: #EED595; --note-fg: #6E4500; --note-strong: #8A5A00; --note-focus: #C99A1E; --note-soft: #FFFCF2;
  --fail-bg: #FFFBF1; --fail-border: #E0B04A;

  --bubble-in: #F1F3F5; --bubble-in-fg: #1F1F1F;
  --bubble-out: var(--primary-soft); --bubble-out-fg: color-mix(in oklab, var(--primary) 32%, #0A1220);
  --bubble-other: #E9F7F4; --bubble-other-fg: #0C4A40; --bubble-other-border: transparent;
  --bubble-fail: #FFF4F2; --bubble-fail-border: #F3B8AE; --bubble-fail-fg: #5A1A12;
  --file-bg: color-mix(in oklab, var(--primary) 4%, #FFFFFF); --file-border: color-mix(in oklab, var(--primary) 17%, #FFFFFF);
  --summary-bg: color-mix(in oklab, var(--primary) 4%, #FFFFFF); --summary-border: color-mix(in oklab, var(--primary) 12%, #FFFFFF); --summary-fg: #1F2A3D;
  --sug-bg: color-mix(in oklab, var(--primary) 5%, #FFFFFF); --sug-border: color-mix(in oklab, var(--primary) 20%, #FFFFFF);
  --sug-hover: color-mix(in oklab, var(--primary) 11%, #FFFFFF); --sug-fg: color-mix(in oklab, var(--primary) 32%, #0A1220);
  --info-soft: #EAF7F4; --info-fg: #0C4A40;
  --mark: #FFE58F; --star: #C27C0E;

  --toast-bg: #1F2430; --toast-fg: #FFFFFF; --toast-border: transparent; --toast-action: #9CC7FF;
  --skel-a: #EDEFF2; --skel-b: #F6F7F9; --skel-anim: aa-shimmer 1.3s ease infinite;
  --scrim: rgba(15, 23, 42, .32); --scroll-shadow: rgba(15, 23, 42, .14);
  --shadow-xs: 0 0 #0000;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 12px 32px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .08);
  --shadow-lg: 0 24px 64px rgba(15, 23, 42, .3);
  --shadow-side: -12px 0 32px rgba(15, 23, 42, .12);

  --btn-radius: var(--r-lg); --field-radius: var(--r-lg); --card-radius: var(--r-xl); --menu-radius: var(--r-xl);
  --item-radius: var(--r-md); --chip-radius: 999px; --pill-radius: var(--r-md); --row-radius: var(--r-xl);
  --bubble-radius: calc(var(--radius) * 1.75); --panel-radius: var(--r-2xl);
  --weight-strong: 700; --weight-head: 700; --weight-active: 700; --tracking-head: -.01em;
  --side-bg: var(--surface); --side-fg: var(--fg-3); --side-hover: var(--hover); --side-hover-fg: var(--fg-3);
  --side-active-bg: var(--active); --side-active-fg: var(--primary-soft-fg); --side-muted: var(--fg-muted);
  --side-border: var(--border); --side-title: var(--fg); --side-sub-bg: transparent; --side-parent-fg: var(--primary-soft-fg);
  color-scheme: light;
}

[data-theme="anyapp"][data-mode="dark"] {
  --bg: #0B0D10; --surface: #14161A; --surface-2: #111317; --card: #181B20; --elevated: #1B1E24;
  --subtle: #1D2128; --hover: #20242C; --active: var(--primary-soft);
  --fg: #E8EAEE; --fg-2: #C5CAD3; --fg-3: #AEB4BF; --fg-muted: #8D95A2;
  --border: #252930; --border-strong: #323843; --input: #343A45;

  --primary: #2B6FE6; --primary-hover: #3D7EF0; --primary-fg: #FFFFFF;
  --primary-soft: color-mix(in oklab, var(--primary) 20%, #14161A); --primary-soft-fg: #A7C8FF;
  --ring: #5C9DFF; --ring-alpha: 30%;

  --danger: #FF948C; --danger-solid: #E5484D; --danger-soft: rgba(229, 72, 77, .16);
  --warn: #F5B547; --warn-soft: rgba(245, 158, 11, .14);
  --ok: #4ADE80; --ok-solid: #22C55E; --ok-soft: rgba(34, 197, 94, .14);
  --snooze: #B4B6FF; --snooze-solid: #8B8EF5; --snooze-soft: rgba(99, 102, 241, .18);
  --label: #C9B9FF; --label-soft: rgba(139, 92, 246, .2); --label-border: transparent;
  --sample: #F5B547; --sample-soft: rgba(245, 158, 11, .14);
  --unread: #FB923C; --unread-line: rgba(251, 146, 60, .45); --draft: #FDBA74;
  --note-bg: rgba(234, 179, 8, .1); --note-border: rgba(234, 179, 8, .32); --note-fg: #FCD34D; --note-strong: #B7791F; --note-focus: #EAB308; --note-soft: rgba(234, 179, 8, .06);
  --fail-bg: rgba(234, 179, 8, .08); --fail-border: rgba(234, 179, 8, .45);

  --bubble-in: #1F232A; --bubble-in-fg: #E8EAEE;
  --bubble-out: color-mix(in oklab, var(--primary) 26%, #14161A); --bubble-out-fg: #E4EEFF;
  --bubble-other: rgba(20, 184, 166, .18); --bubble-other-fg: #C9F5EE; --bubble-other-border: transparent;
  --bubble-fail: rgba(229, 72, 77, .12); --bubble-fail-border: rgba(229, 72, 77, .45); --bubble-fail-fg: #FFD1CD;
  --file-bg: color-mix(in oklab, var(--primary) 10%, #14161A); --file-border: color-mix(in oklab, var(--primary) 28%, #14161A);
  --summary-bg: color-mix(in oklab, var(--primary) 9%, #14161A); --summary-border: color-mix(in oklab, var(--primary) 22%, #14161A); --summary-fg: #D6E4FF;
  --sug-bg: color-mix(in oklab, var(--primary) 12%, #14161A); --sug-border: color-mix(in oklab, var(--primary) 34%, #14161A);
  --sug-hover: color-mix(in oklab, var(--primary) 20%, #14161A); --sug-fg: #D6E6FF;
  --info-soft: rgba(20, 184, 166, .14); --info-fg: #99F6E4;
  --mark: rgba(250, 204, 21, .35); --star: #F5B547;

  --toast-bg: #262B34; --toast-fg: #F2F4F7; --toast-border: #353B46; --toast-action: #A7C8FF;
  --skel-a: #1B1F26; --skel-b: #252A33;
  --scrim: rgba(0, 0, 0, .55); --scroll-shadow: rgba(0, 0, 0, .6);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .05);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06);
  --shadow-side: -12px 0 32px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* ── shadcn/ui: neutral grays, Geist, near-black primary ─────────────────────────
   Raw values are the published shadcn/ui defaults (OKLCH). The semantic mapping below reads them,
   so a base gray or the dark palette only swaps the raw --sh-* values. */
[data-theme="shadcn"] {
  --sh-background: oklch(1 0 0);
  --sh-foreground: oklch(0.145 0 0);
  --sh-card: oklch(1 0 0);
  --sh-popover: oklch(1 0 0);
  --sh-primary: oklch(0.205 0 0);
  --sh-primary-foreground: oklch(0.985 0 0);
  --sh-secondary: oklch(0.97 0 0);
  --sh-muted: oklch(0.97 0 0);
  --sh-muted-foreground: oklch(0.556 0 0);
  --sh-accent: oklch(0.97 0 0);
  --sh-destructive: oklch(0.577 0.245 27.325);
  --sh-border: oklch(0.922 0 0);
  --sh-input: oklch(0.922 0 0);
  --sh-ring: oklch(0.708 0 0);
  --sh-sidebar: oklch(0.985 0 0);
  --sh-strong: oklch(0.87 0 0);
  --sh-fg-2: oklch(0.269 0 0);

  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --bg: var(--sh-background); --surface: var(--sh-background); --surface-2: var(--sh-sidebar);
  --card: var(--sh-card); --elevated: var(--sh-popover);
  --subtle: var(--sh-muted); --hover: var(--sh-accent); --active: var(--sh-accent);
  --fg: var(--sh-foreground); --fg-2: var(--sh-fg-2); --fg-3: var(--sh-muted-foreground); --fg-muted: var(--sh-muted-foreground);
  --border: var(--sh-border); --border-strong: var(--sh-strong); --input: var(--sh-input);

  --primary: var(--sh-primary); --primary-hover: color-mix(in oklab, var(--sh-primary) 90%, transparent);
  --primary-fg: var(--sh-primary-foreground);
  --primary-soft: var(--sh-secondary); --primary-soft-fg: var(--sh-foreground);
  --ring: var(--sh-ring); --ring-alpha: 50%;
  --focus-w: 3px; --focus-c: var(--ring-soft); --focus-o: 0px;

  --danger: var(--sh-destructive); --danger-solid: var(--sh-destructive);
  --danger-soft: color-mix(in oklab, var(--sh-destructive) 10%, transparent);
  --warn: oklch(0.555 0.163 48.998); --warn-soft: oklch(0.987 0.022 95.277);
  --ok: oklch(0.527 0.154 150.069); --ok-solid: oklch(0.627 0.194 149.214); --ok-soft: oklch(0.982 0.018 155.826);
  --snooze: var(--sh-foreground); --snooze-solid: oklch(0.585 0.233 277.117); --snooze-soft: var(--sh-secondary);
  --label: var(--sh-foreground); --label-soft: transparent; --label-border: var(--sh-border);
  --sample: oklch(0.555 0.163 48.998); --sample-soft: oklch(0.987 0.022 95.277);
  --unread: oklch(0.577 0.245 27.325); --unread-line: color-mix(in oklab, var(--sh-destructive) 35%, transparent);
  --draft: oklch(0.646 0.222 41.116);
  --note-bg: oklch(0.987 0.026 102.212); --note-border: oklch(0.945 0.129 101.54); --note-fg: oklch(0.476 0.114 61.907);
  --note-strong: oklch(0.554 0.135 66.442); --note-focus: oklch(0.795 0.184 86.047); --note-soft: oklch(0.993 0.013 106.423);
  --fail-bg: oklch(0.987 0.022 95.277); --fail-border: oklch(0.879 0.169 91.605);

  --bubble-in: var(--sh-muted); --bubble-in-fg: var(--sh-foreground);
  --bubble-out: var(--primary); --bubble-out-fg: var(--primary-fg);
  --bubble-other: var(--sh-background); --bubble-other-fg: var(--sh-foreground); --bubble-other-border: var(--sh-border);
  --bubble-fail: color-mix(in oklab, var(--sh-destructive) 7%, var(--sh-background)); --bubble-fail-border: color-mix(in oklab, var(--sh-destructive) 45%, transparent);
  --bubble-fail-fg: var(--sh-foreground);
  --file-bg: var(--sh-background); --file-border: var(--sh-border);
  --summary-bg: var(--sh-sidebar); --summary-border: var(--sh-border); --summary-fg: var(--sh-foreground);
  --sug-bg: var(--sh-background); --sug-border: var(--sh-border); --sug-hover: var(--sh-accent); --sug-fg: var(--sh-foreground);
  --info-soft: var(--sh-muted); --info-fg: var(--sh-foreground);
  --mark: oklch(0.945 0.129 101.54); --star: oklch(0.769 0.188 70.08);

  --toast-bg: var(--sh-popover); --toast-fg: var(--sh-foreground); --toast-border: var(--sh-border); --toast-action: var(--primary);
  --skel-a: var(--sh-accent); --skel-b: var(--sh-accent); --skel-anim: aa-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
  --scrim: oklch(0 0 0 / 50%); --scroll-shadow: oklch(0 0 0 / 8%);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  --shadow-side: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);

  --btn-radius: var(--r-md); --field-radius: var(--r-md); --card-radius: var(--r-xl); --menu-radius: var(--r-md);
  --item-radius: var(--r-sm); --chip-radius: var(--r-md); --pill-radius: var(--r-md); --row-radius: var(--r-lg);
  --bubble-radius: var(--r-xl); --panel-radius: var(--r-xl);
  --weight-strong: 600; --weight-head: 600; --weight-active: 500; --tracking-head: -.015em;
  --side-bg: var(--sh-sidebar); --side-fg: var(--sh-foreground); --side-hover: var(--sh-accent); --side-hover-fg: var(--sh-foreground);
  --side-active-bg: var(--sh-accent); --side-active-fg: var(--sh-foreground); --side-muted: color-mix(in oklab, var(--sh-foreground) 70%, transparent);
  --side-border: var(--sh-border); --side-title: var(--sh-foreground); --side-sub-bg: transparent; --side-parent-fg: var(--sh-foreground);
  color-scheme: light;
}

/* base grays offered by the shadcn/ui theme page (Tailwind v4 zinc and stone) */
[data-theme="shadcn"][data-base="zinc"] {
  --sh-foreground: oklch(0.141 0.005 285.823); --sh-primary: oklch(0.21 0.006 285.885);
  --sh-secondary: oklch(0.967 0.001 286.375); --sh-muted: oklch(0.967 0.001 286.375); --sh-accent: oklch(0.967 0.001 286.375);
  --sh-muted-foreground: oklch(0.552 0.016 285.938); --sh-border: oklch(0.92 0.004 286.32); --sh-input: oklch(0.92 0.004 286.32);
  --sh-ring: oklch(0.705 0.015 286.067); --sh-strong: oklch(0.871 0.006 286.286); --sh-fg-2: oklch(0.274 0.006 286.033);
}
[data-theme="shadcn"][data-base="stone"] {
  --sh-foreground: oklch(0.147 0.004 49.25); --sh-primary: oklch(0.216 0.006 56.043); --sh-primary-foreground: oklch(0.985 0.001 106.423);
  --sh-secondary: oklch(0.97 0.001 106.424); --sh-muted: oklch(0.97 0.001 106.424); --sh-accent: oklch(0.97 0.001 106.424);
  --sh-muted-foreground: oklch(0.553 0.013 58.071); --sh-border: oklch(0.923 0.003 48.717); --sh-input: oklch(0.923 0.003 48.717);
  --sh-ring: oklch(0.709 0.01 56.259); --sh-sidebar: oklch(0.985 0.001 106.423); --sh-strong: oklch(0.869 0.005 56.366);
  --sh-fg-2: oklch(0.268 0.007 34.298);
}

[data-theme="shadcn"][data-mode="dark"] {
  --sh-background: oklch(0.145 0 0);
  --sh-foreground: oklch(0.985 0 0);
  --sh-card: oklch(0.205 0 0);
  --sh-popover: oklch(0.205 0 0);
  --sh-primary: oklch(0.922 0 0);
  --sh-primary-foreground: oklch(0.205 0 0);
  --sh-secondary: oklch(0.269 0 0);
  --sh-muted: oklch(0.269 0 0);
  --sh-muted-foreground: oklch(0.708 0 0);
  --sh-accent: oklch(0.269 0 0);
  --sh-destructive: oklch(0.704 0.191 22.216);
  --sh-border: oklch(1 0 0 / 10%);
  --sh-input: oklch(1 0 0 / 15%);
  --sh-ring: oklch(0.556 0 0);
  --sh-sidebar: oklch(0.205 0 0);
  --sh-strong: oklch(1 0 0 / 18%);
  --sh-fg-2: oklch(0.922 0 0);

  --warn: oklch(0.828 0.189 84.429); --warn-soft: oklch(0.769 0.188 70.08 / 14%);
  --ok: oklch(0.792 0.209 151.711); --ok-solid: oklch(0.723 0.219 149.579); --ok-soft: oklch(0.723 0.219 149.579 / 14%);
  --snooze-solid: oklch(0.673 0.182 276.935);
  --sample: oklch(0.828 0.189 84.429); --sample-soft: oklch(0.769 0.188 70.08 / 14%);
  --unread: oklch(0.704 0.191 22.216); --draft: oklch(0.837 0.128 66.29);
  --note-bg: oklch(0.795 0.184 86.047 / 10%); --note-border: oklch(0.795 0.184 86.047 / 32%); --note-fg: oklch(0.905 0.182 98.111);
  --note-strong: oklch(0.681 0.162 75.834); --note-focus: oklch(0.795 0.184 86.047); --note-soft: oklch(0.795 0.184 86.047 / 6%);
  --fail-bg: oklch(0.795 0.184 86.047 / 8%); --fail-border: oklch(0.795 0.184 86.047 / 45%);
  --bubble-fail: color-mix(in oklab, var(--sh-destructive) 14%, var(--sh-background));
  --mark: oklch(0.795 0.184 86.047 / 32%); --star: oklch(0.828 0.189 84.429);
  --scrim: oklch(0 0 0 / 60%); --scroll-shadow: oklch(0 0 0 / 50%);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .3);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .4), 0 1px 2px -1px rgb(0 0 0 / .4);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .45), 0 2px 4px -2px rgb(0 0 0 / .45), 0 0 0 1px oklch(1 0 0 / 8%);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .5), 0 4px 6px -4px rgb(0 0 0 / .5), 0 0 0 1px oklch(1 0 0 / 8%);
  --shadow-side: 0 10px 15px -3px rgb(0 0 0 / .5), 0 0 0 1px oklch(1 0 0 / 8%);
  color-scheme: dark;
}
[data-theme="shadcn"][data-base="zinc"][data-mode="dark"] {
  --sh-background: oklch(0.141 0.005 285.823); --sh-card: oklch(0.21 0.006 285.885); --sh-popover: oklch(0.21 0.006 285.885);
  --sh-primary: oklch(0.92 0.004 286.32); --sh-primary-foreground: oklch(0.21 0.006 285.885);
  --sh-secondary: oklch(0.274 0.006 286.033); --sh-muted: oklch(0.274 0.006 286.033); --sh-accent: oklch(0.274 0.006 286.033);
  --sh-muted-foreground: oklch(0.705 0.015 286.067); --sh-ring: oklch(0.552 0.016 285.938); --sh-sidebar: oklch(0.21 0.006 285.885);
  --sh-fg-2: oklch(0.92 0.004 286.32); --sh-foreground: oklch(0.985 0 0);
}
[data-theme="shadcn"][data-base="stone"][data-mode="dark"] {
  --sh-background: oklch(0.147 0.004 49.25); --sh-card: oklch(0.216 0.006 56.043); --sh-popover: oklch(0.216 0.006 56.043);
  --sh-primary: oklch(0.923 0.003 48.717); --sh-primary-foreground: oklch(0.216 0.006 56.043);
  --sh-secondary: oklch(0.268 0.007 34.298); --sh-muted: oklch(0.268 0.007 34.298); --sh-accent: oklch(0.268 0.007 34.298);
  --sh-muted-foreground: oklch(0.709 0.01 56.259); --sh-ring: oklch(0.553 0.013 58.071); --sh-sidebar: oklch(0.216 0.006 56.043);
  --sh-fg-2: oklch(0.923 0.003 48.717); --sh-foreground: oklch(0.985 0.001 106.423);
}

/* ── Ant Design v5: seed token #1677ff, system font, radius 6, layout grey #f5f5f5 ─────────
   Values are the default theme and the dark algorithm. data-base="navy" gives the Ant Design Pro sider (#001529). */
[data-theme="antd"] {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

  --bg: #f5f5f5; --surface: #ffffff; --surface-2: #fafafa; --card: #ffffff; --elevated: #ffffff;
  --subtle: rgba(0, 0, 0, .04); --hover: rgba(0, 0, 0, .04); --active: var(--primary-soft);
  --fg: rgba(0, 0, 0, .88); --fg-2: rgba(0, 0, 0, .75); --fg-3: rgba(0, 0, 0, .65); --fg-muted: rgba(0, 0, 0, .45);
  --border: #f0f0f0; --border-strong: #d9d9d9; --input: #d9d9d9;

  --primary: #1677ff; --primary-hover: #4096ff; --primary-fg: #ffffff;
  --primary-soft: #e6f4ff; --primary-soft-fg: var(--primary);
  --ring: var(--primary); --ring-alpha: 45%;
  --focus-w: 4px; --focus-c: var(--ring-soft); --focus-o: 1px;

  --danger: #cf1322; --danger-solid: #ff4d4f; --danger-soft: #fff2f0; --danger-border: #ffccc7;
  --warn: #d48806; --warn-soft: #fffbe6; --warn-border: #ffe58f;
  --ok: #389e0d; --ok-solid: #52c41a; --ok-soft: #f6ffed; --ok-border: #b7eb8f;
  --snooze: #1d39c4; --snooze-solid: #2f54eb; --snooze-soft: #f0f5ff; --snooze-border: #adc6ff;
  --label: #531dab; --label-soft: #f9f0ff; --label-border: #d3adf7;
  --sample: #d46b08; --sample-soft: #fff7e6; --sample-border: #ffd591;
  --unread: #ff4d4f; --unread-line: #ffccc7; --draft: #d46b08;
  --note-bg: #fffbe6; --note-border: #ffe58f; --note-fg: #ad6800; --note-strong: #d48806; --note-focus: #faad14; --note-soft: #fffbe6;
  --fail-bg: #fffbe6; --fail-border: #ffe58f;

  --bubble-in: #f5f5f5; --bubble-in-fg: rgba(0, 0, 0, .88);
  --bubble-out: var(--primary-soft); --bubble-out-fg: rgba(0, 0, 0, .88);
  --bubble-other: #f6ffed; --bubble-other-fg: rgba(0, 0, 0, .88); --bubble-other-border: #d9f7be;
  --bubble-fail: #fff2f0; --bubble-fail-border: #ffccc7; --bubble-fail-fg: rgba(0, 0, 0, .88);
  --file-bg: #fafafa; --file-border: #f0f0f0;
  --summary-bg: var(--primary-soft); --summary-border: color-mix(in oklab, var(--primary) 22%, #ffffff); --summary-fg: rgba(0, 0, 0, .88);
  --sug-bg: #ffffff; --sug-border: #f0f0f0; --sug-hover: rgba(0, 0, 0, .04); --sug-fg: rgba(0, 0, 0, .88);
  --info-soft: var(--primary-soft); --info-fg: rgba(0, 0, 0, .88);
  --mark: #ffe58f; --star: #fadb14;

  --toast-bg: #ffffff; --toast-fg: rgba(0, 0, 0, .88); --toast-border: transparent; --toast-action: var(--primary);
  --skel-a: rgba(0, 0, 0, .06); --skel-b: rgba(0, 0, 0, .15); --skel-anim: aa-shimmer 1.4s ease infinite;
  --scrim: rgba(0, 0, 0, .45); --scroll-shadow: rgba(0, 0, 0, .08);
  --shadow-xs: 0 2px 0 rgba(0, 0, 0, .02);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .03), 0 1px 6px -1px rgba(0, 0, 0, .02), 0 2px 4px 0 rgba(0, 0, 0, .02);
  --shadow-md: 0 6px 16px 0 rgba(0, 0, 0, .08), 0 3px 6px -4px rgba(0, 0, 0, .12), 0 9px 28px 8px rgba(0, 0, 0, .05);
  --shadow-lg: 0 6px 16px 0 rgba(0, 0, 0, .08), 0 3px 6px -4px rgba(0, 0, 0, .12), 0 9px 28px 8px rgba(0, 0, 0, .05);
  --shadow-side: -6px 0 16px 0 rgba(0, 0, 0, .08), -3px 0 6px -4px rgba(0, 0, 0, .12), -9px 0 28px 8px rgba(0, 0, 0, .05);
  --avatar-bg: rgba(0, 0, 0, .25); --avatar-fg: #ffffff;

  /* radius 6 gives antd's own scale: SM 4, base 6, LG 8 */
  --btn-radius: var(--r-lg); --field-radius: var(--r-lg); --card-radius: calc(var(--radius) * 1.34); --menu-radius: calc(var(--radius) * 1.34);
  --item-radius: calc(var(--radius) * .67); --chip-radius: calc(var(--radius) * .67); --pill-radius: calc(var(--radius) * .67); --row-radius: 0px;
  --bubble-radius: calc(var(--radius) * 2); --panel-radius: calc(var(--radius) * 1.34);
  --weight-strong: 600; --weight-head: 600; --weight-active: 400; --tracking-head: 0;
  --side-bg: #ffffff; --side-fg: rgba(0, 0, 0, .88); --side-hover: rgba(0, 0, 0, .06); --side-hover-fg: rgba(0, 0, 0, .88);
  --side-active-bg: var(--primary-soft); --side-active-fg: var(--primary); --side-muted: rgba(0, 0, 0, .45);
  --side-border: #f0f0f0; --side-title: rgba(0, 0, 0, .88); --side-sub-bg: rgba(0, 0, 0, .02); --side-parent-fg: var(--primary);
  color-scheme: light;
}
[data-theme="antd"][data-mode="dark"] {
  --bg: #000000; --surface: #141414; --surface-2: #1d1d1d; --card: #141414; --elevated: #1f1f1f;
  --subtle: rgba(255, 255, 255, .08); --hover: rgba(255, 255, 255, .08); --active: var(--primary-soft);
  --fg: rgba(255, 255, 255, .85); --fg-2: rgba(255, 255, 255, .75); --fg-3: rgba(255, 255, 255, .65); --fg-muted: rgba(255, 255, 255, .45);
  --border: #303030; --border-strong: #424242; --input: #424242;

  --primary: #1668dc; --primary-hover: #3c89e8; --primary-fg: #ffffff;
  --primary-soft: #111a2c; --primary-soft-fg: #3c89e8; --ring-alpha: 55%;

  --danger: #dc4446; --danger-solid: #dc4446; --danger-soft: #2c1618; --danger-border: #5b2526;
  --warn: #d89614; --warn-soft: #2b2111; --warn-border: #594214;
  --ok: #49aa19; --ok-solid: #49aa19; --ok-soft: #162312; --ok-border: #274916;
  --snooze: #5273e0; --snooze-solid: #2b4acb; --snooze-soft: #131629; --snooze-border: #1c2755;
  --label: #854eca; --label-soft: #1a1325; --label-border: #301c4d;
  --sample: #d87a16; --sample-soft: #2b1d11; --sample-border: #593815;
  --unread: #dc4446; --unread-line: #5b2526; --draft: #e89a3c;
  --note-bg: #2b2111; --note-border: #594214; --note-fg: #d89614; --note-strong: #aa7714; --note-focus: #d89614; --note-soft: #2b2111;
  --fail-bg: #2b2111; --fail-border: #594214;

  --bubble-in: rgba(255, 255, 255, .08); --bubble-in-fg: rgba(255, 255, 255, .85);
  --bubble-out: var(--primary-soft); --bubble-out-fg: rgba(255, 255, 255, .85);
  --bubble-other: #162312; --bubble-other-fg: rgba(255, 255, 255, .85); --bubble-other-border: #274916;
  --bubble-fail: #2c1618; --bubble-fail-border: #5b2526; --bubble-fail-fg: rgba(255, 255, 255, .85);
  --file-bg: #1d1d1d; --file-border: #303030;
  --summary-bg: var(--primary-soft); --summary-border: #15325b; --summary-fg: rgba(255, 255, 255, .85);
  --sug-bg: #141414; --sug-border: #303030; --sug-hover: rgba(255, 255, 255, .08); --sug-fg: rgba(255, 255, 255, .85);
  --info-soft: var(--primary-soft); --info-fg: rgba(255, 255, 255, .85);
  --mark: rgba(250, 219, 20, .32); --star: #d8bd14;

  --toast-bg: #1f1f1f; --toast-fg: rgba(255, 255, 255, .85); --toast-border: transparent; --toast-action: #3c89e8;
  --skel-a: rgba(255, 255, 255, .08); --skel-b: rgba(255, 255, 255, .16);
  --scrim: rgba(0, 0, 0, .45); --scroll-shadow: rgba(0, 0, 0, .6);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .3), 0 1px 6px -1px rgba(0, 0, 0, .2);
  --shadow-md: 0 6px 16px 0 rgba(0, 0, 0, .32), 0 3px 6px -4px rgba(0, 0, 0, .48), 0 9px 28px 8px rgba(0, 0, 0, .2);
  --shadow-lg: 0 6px 16px 0 rgba(0, 0, 0, .32), 0 3px 6px -4px rgba(0, 0, 0, .48), 0 9px 28px 8px rgba(0, 0, 0, .2);
  --shadow-side: -6px 0 16px 0 rgba(0, 0, 0, .32), -9px 0 28px 8px rgba(0, 0, 0, .2);
  --avatar-bg: rgba(255, 255, 255, .25); --avatar-fg: #ffffff;
  --side-bg: #141414; --side-fg: rgba(255, 255, 255, .65); --side-hover: rgba(255, 255, 255, .08); --side-hover-fg: rgba(255, 255, 255, .85);
  --side-active-bg: var(--primary-soft); --side-active-fg: var(--primary-soft-fg); --side-muted: rgba(255, 255, 255, .45);
  --side-border: #303030; --side-title: rgba(255, 255, 255, .85); --side-sub-bg: rgba(255, 255, 255, .02); --side-parent-fg: var(--primary-soft-fg);
  color-scheme: dark;
}
/* the Ant Design Pro sider, in both modes: navy, selected item filled with the primary colour */
[data-theme="antd"][data-base="navy"] {
  --side-bg: #001529; --side-fg: rgba(255, 255, 255, .65); --side-hover: transparent; --side-hover-fg: #ffffff;
  --side-active-bg: var(--primary); --side-active-fg: #ffffff; --side-muted: rgba(255, 255, 255, .45);
  --side-border: transparent; --side-title: #ffffff; --side-sub-bg: #000c17; --side-parent-fg: #ffffff;
}

/* ── accents: any theme, light and dark ───────────────────────────────────────────
   Tailwind v4 palette steps chosen so white button text keeps at least 4.5:1 contrast.
   The extra [data-theme] keeps these above the base-gray blocks; dark rules carry one more attribute. */
[data-theme][data-accent="blue"] {
  --primary: oklch(0.546 0.245 262.881); --primary-hover: oklch(0.488 0.243 264.376); --primary-fg: oklch(0.985 0 0);
  --primary-soft: oklch(0.97 0.014 254.604); --primary-soft-fg: oklch(0.424 0.199 265.638); --ring: oklch(0.623 0.214 259.815);
}
[data-theme][data-accent="violet"] {
  --primary: oklch(0.541 0.281 293.009); --primary-hover: oklch(0.491 0.27 292.581); --primary-fg: oklch(0.985 0 0);
  --primary-soft: oklch(0.969 0.016 293.756); --primary-soft-fg: oklch(0.432 0.232 292.759); --ring: oklch(0.606 0.25 292.717);
}
[data-theme][data-accent="green"] {
  --primary: oklch(0.527 0.154 150.069); --primary-hover: oklch(0.448 0.119 151.328); --primary-fg: oklch(0.985 0 0);
  --primary-soft: oklch(0.982 0.018 155.826); --primary-soft-fg: oklch(0.448 0.119 151.328); --ring: oklch(0.627 0.194 149.214);
}
[data-theme][data-accent="orange"] {
  --primary: oklch(0.553 0.195 38.402); --primary-hover: oklch(0.47 0.157 37.304); --primary-fg: oklch(0.985 0 0);
  --primary-soft: oklch(0.98 0.016 73.684); --primary-soft-fg: oklch(0.47 0.157 37.304); --ring: oklch(0.705 0.213 47.604);
}
[data-theme][data-accent="rose"] {
  --primary: oklch(0.586 0.253 17.585); --primary-hover: oklch(0.514 0.222 16.935); --primary-fg: oklch(0.985 0 0);
  --primary-soft: oklch(0.969 0.015 12.422); --primary-soft-fg: oklch(0.455 0.188 13.697); --ring: oklch(0.645 0.246 16.439);
}
[data-theme][data-accent="blue"][data-mode="dark"] {
  --primary: oklch(0.546 0.245 262.881); --primary-hover: oklch(0.588 0.23 261); --primary-fg: oklch(0.985 0 0);
  --primary-soft: oklch(0.546 0.245 262.881 / 20%); --primary-soft-fg: oklch(0.809 0.105 251.813); --ring: oklch(0.623 0.214 259.815);
}
[data-theme][data-accent="violet"][data-mode="dark"] {
  --primary: oklch(0.541 0.281 293.009); --primary-hover: oklch(0.58 0.27 293); --primary-fg: oklch(0.985 0 0);
  --primary-soft: oklch(0.541 0.281 293.009 / 22%); --primary-soft-fg: oklch(0.811 0.111 293.571); --ring: oklch(0.606 0.25 292.717);
}
[data-theme][data-accent="green"][data-mode="dark"] {
  --primary: oklch(0.527 0.154 150.069); --primary-hover: oklch(0.58 0.17 150); --primary-fg: oklch(0.985 0 0);
  --primary-soft: oklch(0.527 0.154 150.069 / 22%); --primary-soft-fg: oklch(0.871 0.15 154.449); --ring: oklch(0.627 0.194 149.214);
}
[data-theme][data-accent="orange"][data-mode="dark"] {
  --primary: oklch(0.553 0.195 38.402); --primary-hover: oklch(0.6 0.2 41); --primary-fg: oklch(0.985 0 0);
  --primary-soft: oklch(0.553 0.195 38.402 / 22%); --primary-soft-fg: oklch(0.837 0.128 66.29); --ring: oklch(0.705 0.213 47.604);
}
[data-theme][data-accent="rose"][data-mode="dark"] {
  --primary: oklch(0.586 0.253 17.585); --primary-hover: oklch(0.625 0.24 17); --primary-fg: oklch(0.985 0 0);
  --primary-soft: oklch(0.586 0.253 17.585 / 22%); --primary-soft-fg: oklch(0.81 0.117 11.638); --ring: oklch(0.645 0.246 16.439);
}

/* ── motion presets ──────────────────────────────────────────────────────────────
   One set of durations and easings drives every transition and enter animation in app.css. */
:root, [data-motion] {
  --dur-1: 100ms; --dur-2: 160ms; --dur-3: 220ms;
  --ease-out: cubic-bezier(.2, 0, 0, 1); --ease-spring: cubic-bezier(.2, 0, 0, 1);
  --enter-y: 4px; --enter-scale: 1; --pop-from: .97;
}
[data-motion="none"] { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
[data-motion="smooth"] {
  --dur-1: 140ms; --dur-2: 240ms; --dur-3: 360ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.16, 1, .3, 1);
  --enter-y: 8px; --enter-scale: .985; --pop-from: .95;
}
[data-motion="expressive"] {
  --dur-1: 160ms; --dur-2: 320ms; --dur-3: 520ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --enter-y: 16px; --enter-scale: .9; --pop-from: .88;
}
/* Ant Design keeps its own timing when motion is "Tinh tế": motionDurationFast/Mid/Slow on motionEaseInOut */
[data-theme="antd"][data-motion="subtle"] {
  --dur-1: 100ms; --dur-2: 200ms; --dur-3: 300ms;
  --ease-out: cubic-bezier(.645, .045, .355, 1); --ease-spring: cubic-bezier(.645, .045, .355, 1);
}