/*
  BaliBot design tokens. Loaded first.

  Direction: Speechify's product language, rebuilt for a Hebrew service product. Neutral
  near-black and near-white surfaces, one accent used for action and for the bot's "voice",
  flat 24px cards, pill controls, medium-weight type at generous sizes.
  Colour: the BaliBot brand kit (approved October 2026). The accent is its deep teal
  (#12665C; a lighter teal in dark mode, for contrast); peach (#FFAD87) is the secondary,
  for small highlights only. Surfaces stay neutral (the kit's cream lives in the mark and
  the chat avatar, not behind every screen).
  Character: the logo is round and friendly, so the display type is Rubik (rounded corners,
  heavy weights, Hebrew and Latin) for headings, the wordmark, buttons and big numbers; body
  text stays Heebo. Light-mode text uses the kit's dark ink. The glow panels are brand-teal
  tiles, the app icon's own block. The bot's face (the "b" with the smile, on cream) is
  wherever the bot speaks; the voice wave only means a live call or work in progress.

  Theme: system by default. <html data-theme="light|dark"> (set server-side from the
  ea_theme cookie) overrides it, so the dark block is declared twice below.

  Shape rule:
    - interactive controls (buttons, chips, tabs, tags): full pill
    - inputs and inner panels: --r-md (14px)
    - cards and sheets: --r-lg (24px)
*/

@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("../fonts/rubik-hebrew-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("../fonts/rubik-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/heebo-hebrew-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/heebo-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --font: "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-display: "Rubik", "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* surfaces: cool neutrals, no warm paper */
  --bg: #f7f7f7;
  --surface: #ffffff;
  --surface-2: #f1f1f3;
  --surface-3: #e7e7ea;
  --line: #e6e6e9;
  --line-strong: #cdcdd6;
  /* text: the kit's dark ink and two quieter steps of it */
  --text: #20342f;
  --text-2: #4a5753;
  --text-3: #66716d;

  /* the one accent: BaliBot deep teal */
  --accent: #12665c;
  --accent-hover: #0e5a51;
  --accent-ink: #0e5a51;
  --accent-soft: #e4f2ef;
  --accent-soft-2: #c9e6df;
  --accent-glow: rgb(18 102 92 / 0.32);
  --on-accent: #ffffff;
  --highlight: #c4e6de;
  /* text selection */
  /* the secondary: peach, for small highlights (a count that needs you, a done mark) */
  --peach: #ffad87;
  --peach-soft: #ffeadf;
  --on-peach: #20342f;
  /* the glow panel (.glow): a brand-teal tile, the app icon's block, lit from below */
  --glow-bg: #12665c;
  --glow-fg: #fffdf8;
  /* the bot's face and its bubbles: the kit's warm cream (the same in both themes) */
  --brand-cream: #fff8ee;
  --on-cream: #20342f;
  /* a soft cream square behind an icon (light); a quiet teal one in dark mode */
  --cream-soft: #fbf3e6;

  --inverse: #0f0f12;
  --inverse-2: #1c1c22;
  --on-inverse: #f5f5f7;
  --on-inverse-2: #a9aab6;

  --ok: #0c7643;
  --ok-soft: #e2f4e9;
  --warn: #8a5100;
  --warn-soft: #fff0d4;
  --danger: #bd2d26;
  --danger-soft: #fdeceb;

  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --lift: 0 12px 32px -16px rgb(15 15 40 / 0.28);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 24px;
  --pill: 999px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  --t-xs: 0.8125rem;
  --t-sm: 0.875rem;
  --t-md: 1rem;
  --t-lg: 1.125rem;
  --t-xl: 1.375rem;
  --t-2xl: 1.75rem;
  --t-3xl: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
  --t-display: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);

  --w-regular: 400;
  --w-medium: 500;
  --w-semi: 600;
  --w-bold: 680;

  /* motion: Speechify's own curves and durations */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 150ms;
  --t-med: 300ms;
  --t-slow: 600ms;

  --sidebar: 272px;
}

/* dark: declared for the system preference and again for the manual override */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #141414;
    --surface: #1f1f1f;
    --surface-2: #272729;
    --surface-3: #313134;
    --line: #2c2c2f;
    --line-strong: #393940;
    --text: #f4f4f6;
    --text-2: #b4b5bf;
    --text-3: #8d8e9a;
    --accent: #17786b;
    --accent-hover: #1c8a7b;
    --accent-ink: #7fd3c4;
    --accent-soft: #0f2a26;
    --accent-soft-2: #17403a;
    --accent-glow: rgb(23 120 107 / 0.45);
    --highlight: #1d4d46;
    --peach-soft: #3a261c;
    --glow-bg: #0f5a51;
    --cream-soft: #1a2d29;
    --inverse: #1d1d22;
    --inverse-2: #27272e;
    --on-inverse: #f4f4f6;
    --on-inverse-2: #a3a4b0;
    --ok: #5cd398;
    --ok-soft: #10301f;
    --warn: #f2bc5a;
    --warn-soft: #33260c;
    --danger: #ff8b82;
    --danger-soft: #3a1513;
    --lift: 0 16px 40px -18px rgb(0 0 0 / 0.8);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141414;
  --surface: #1f1f1f;
  --surface-2: #272729;
  --surface-3: #313134;
  --line: #2c2c2f;
  --line-strong: #393940;
  --text: #f4f4f6;
  --text-2: #b4b5bf;
  --text-3: #8d8e9a;
  --accent: #17786b;
  --accent-hover: #1c8a7b;
  --accent-ink: #7fd3c4;
  --accent-soft: #0f2a26;
  --accent-soft-2: #17403a;
  --accent-glow: rgb(23 120 107 / 0.45);
  --highlight: #1d4d46;
  --peach-soft: #3a261c;
  --glow-bg: #0f5a51;
  --cream-soft: #1a2d29;
  --inverse: #1d1d22;
  --inverse-2: #27272e;
  --on-inverse: #f4f4f6;
  --on-inverse-2: #a3a4b0;
  --ok: #5cd398;
  --ok-soft: #10301f;
  --warn: #f2bc5a;
  --warn-soft: #33260c;
  --danger: #ff8b82;
  --danger-soft: #3a1513;
  --lift: 0 16px 40px -18px rgb(0 0 0 / 0.8);
}