/* Design tokens. Every color, size and timing in the app comes from here.
   Shape rule: controls 8px, containers 12px, status chips are pills. */

:root {
  color-scheme: light;

  /* Neutrals: cool, faintly teal, so the brand accent sits naturally */
  --bg: #f3f6f6;
  --surface: #ffffff;
  --surface-2: #f7f9f9;
  --sidebar: #fafbfb;
  --ink: #14232a;
  --ink-2: #3d4f58;
  --muted: #5b6d76;
  --line: #dde4e6;
  --line-soft: #e9eef0;
  --control: #848f96;

  /* Brand accent: primary actions, current selection, focus */
  --accent: #0b6b5c;
  --accent-hover: #09594d;
  --accent-ink: #ffffff;
  --accent-soft: #e0f0ec;

  /* Status */
  --ok: #14703f;    --ok-soft: #e4f3ea;
  --warn: #865300;  --warn-soft: #fbf0d9;
  --bad: #b42318;   --bad-soft: #fde9e7;
  --info: #1d5bb8;  --info-soft: #e6eefb;
  --wa: #11804a;    --wa-ink: #ffffff;

  /* Chart series */
  --s1: #2a78d6;
  --s2: #e0663a;
  --grid: #e5eaec;
  --axis: #c3cdd1;

  /* Demo controls band, kept dark in both themes */
  --demo-bg: #14232a;
  --demo-ink: #eef3f4;

  /* Simulated phone */
  --chat-bg: #ece6dd;
  --bubble: #d9f5d0;

  --shadow-sm: 0 1px 2px rgb(20 35 42 / 0.06);
  --shadow: 0 1px 2px rgb(20 35 42 / 0.05), 0 6px 20px -4px rgb(20 35 42 / 0.10);
  --shadow-lg: 0 2px 4px rgb(20 35 42 / 0.06), 0 24px 48px -12px rgb(20 35 42 / 0.22);
  --scrim: rgb(13 24 29 / 0.42);

  /* Type: one family carries the whole UI; mono only for IDs and codes */
  --sans: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --arabic: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.8125rem;   /* 13 */
  --text-base: 0.875rem;  /* 14 */
  --text-md: 1rem;        /* 16 */
  --text-lg: 1.1875rem;   /* 19 */
  --text-xl: 1.4375rem;   /* 23 */
  --text-2xl: 1.75rem;    /* 28 */

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;

  /* Motion: crisp and short; this is a tool people use all day */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 120ms;
  --dur-fast: 150ms;
  --dur: 200ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d1519; --surface: #141f25; --surface-2: #18252c; --sidebar: #111a1f;
    --ink: #e5edf0; --ink-2: #b3c1c8; --muted: #8c9ea7; --line: #24343c; --line-soft: #1d2b32; --control: #64808b;
    --accent: #3fbea1; --accent-hover: #5ccdb2; --accent-ink: #06231d; --accent-soft: #13332c;
    --ok: #55c788; --ok-soft: #12301f; --warn: #e6ae4a; --warn-soft: #33280f;
    --bad: #f27a6f; --bad-soft: #3a1b18; --info: #80b2fb; --info-soft: #152a47;
    --wa: #3cc97a; --wa-ink: #04170c;
    --s1: #3987e5; --s2: #e07049; --grid: #22313a; --axis: #3a4c57;
    --chat-bg: #0b141a; --bubble: #005c4b; --demo-bg: #060c0f; --demo-ink: #c9d6dc;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -6px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 2px 4px rgb(0 0 0 / 0.4), 0 24px 48px -12px rgb(0 0 0 / 0.7);
    --scrim: rgb(0 0 0 / 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1519; --surface: #141f25; --surface-2: #18252c; --sidebar: #111a1f;
  --ink: #e5edf0; --ink-2: #b3c1c8; --muted: #8c9ea7; --line: #24343c; --line-soft: #1d2b32; --control: #64808b;
  --accent: #3fbea1; --accent-hover: #5ccdb2; --accent-ink: #06231d; --accent-soft: #13332c;
  --ok: #55c788; --ok-soft: #12301f; --warn: #e6ae4a; --warn-soft: #33280f;
  --bad: #f27a6f; --bad-soft: #3a1b18; --info: #80b2fb; --info-soft: #152a47;
  --wa: #3cc97a; --wa-ink: #04170c;
  --s1: #3987e5; --s2: #e07049; --grid: #22313a; --axis: #3a4c57;
  --chat-bg: #0b141a; --bubble: #005c4b; --demo-bg: #060c0f; --demo-ink: #c9d6dc;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -6px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 2px 4px rgb(0 0 0 / 0.4), 0 24px 48px -12px rgb(0 0 0 / 0.7);
  --scrim: rgb(0 0 0 / 0.6);
}