/*
 * Design tokens.
 *
 * Every colour is defined unconditionally on :root as a LIGHT palette, then the dark
 * palette overrides the same names. Nothing is only defined inside a media query, so a
 * var() can never resolve to nothing (the previous stylesheet scoped colours behind a
 * Telegram-only class and rendered unstyled in a normal browser).
 *
 * Theme resolution, in order of precedence:
 *   1. [data-theme="light"|"dark"] on <html>  - explicit user choice
 *   2. Telegram's themeParams                 - when running inside Telegram
 *   3. prefers-color-scheme                   - the OS setting
 *
 * Look: a warm-grey canvas the sidebar sits on, one white working panel, ink-black for
 * the main action and a warm orange reserved for the assistant (send, focus, highlights).
 * --accent is a fill colour; text in the accent colour uses --accent-ink, which keeps
 * 4.5:1 contrast on both themes. Neutrals lean warm and the status colours are muted
 * (sage, ochre, brick, slate) so nothing on a page fights the orange.
 */

:root {
  color-scheme: light dark;

  /* ---- Surfaces (light) ---- */
  --bg: #f2f1ee;
  --surface-1: #ffffff;
  --surface-2: #f7f6f3;
  --surface-3: #eeece8;
  --surface-hover: #f4f3f0;
  --surface-sunken: #f5f4f1;
  --panel: #ffffff;

  /* ---- Lines ---- */
  --border: #e8e5e0;
  --border-strong: #d7d3cc;

  /* ---- Text ---- */
  --text: #1d1b18;
  --text-muted: #5f5b54;
  --text-dim: #8b867e;
  --text-inverse: #ffffff;

  /* ---- Ink: the primary button ---- */
  --ink: #1d1b18;
  --ink-hover: #35322d;
  --ink-text: #ffffff;

  /* ---- Brand ---- */
  --accent: #ea5b17;
  --accent-hover: #d44d0d;
  --accent-text: #ffffff;
  --accent-ink: #b8430b;
  --accent-soft: #fdf1e9;
  --accent-border: #f5cfb7;
  --accent-glow: rgba(234, 91, 23, 0.14);

  /* ---- Orb ---- */
  --orb-1: #f7bcd0;
  --orb-2: #b9c6ff;
  --orb-3: #d2b8f5;
  --orb-4: #fff8f2;

  /* ---- Semantic ---- */
  --good: #3d7a55;
  --good-soft: #edf5ef;
  --good-border: #c9e0cf;

  --warn: #a36612;
  --warn-soft: #fcf5e6;
  --warn-border: #eed9ab;

  --bad: #b43c32;
  --bad-soft: #fcefed;
  --bad-border: #efcbc6;

  --info: #3c6a93;
  --info-soft: #edf3f8;
  --info-border: #c9dbea;

  /* File types */
  --f-sheet: #3d7a55;
  --f-sheet-soft: #edf5ef;
  --f-doc: #3c6a93;
  --f-doc-soft: #edf3f8;
  --f-pdf: #b43c32;
  --f-pdf-soft: #fcefed;
  --f-media: #75569e;
  --f-media-soft: #f3eff9;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(40, 32, 20, 0.05);
  --shadow-md: 0 1px 2px rgba(40, 32, 20, 0.04), 0 4px 14px -6px rgba(40, 32, 20, 0.09);
  --shadow-lg: 0 12px 30px -10px rgba(40, 32, 20, 0.16), 0 2px 6px -2px rgba(40, 32, 20, 0.06);
  --shadow-pop: 0 24px 60px -14px rgba(40, 32, 20, 0.28);
  --shadow-panel: 0 1px 2px rgba(40, 32, 20, 0.04), 0 8px 24px -14px rgba(40, 32, 20, 0.1);

  /* ---- Radii ---- */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* ---- Spacing (4px rhythm) ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;

  /* ---- Type ---- */
  --font: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-base: 14px;
  --fs-md: 15.5px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 40px;

  --lh-tight: 1.2;
  --lh-normal: 1.55;
  --lh-loose: 1.7;

  /* ---- Layout ---- */
  --sidebar-w: 248px;
  --header-h: 60px;
  --content-max: 1180px;
  --frame-gap: 10px;

  /* ---- Motion ---- */
  --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Dark palette. Applied for the OS setting unless light is forced. ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121110;
    --surface-1: #1b1a18;
    --surface-2: #211f1d;
    --surface-3: #2b2926;
    --surface-hover: #252320;
    --surface-sunken: #151413;
    --panel: #181715;

    --border: #2d2b27;
    --border-strong: #3b3833;

    --text: #efede9;
    --text-muted: #aaa59c;
    --text-dim: #7b766e;
    --text-inverse: #121110;

    --ink: #f2f0ec;
    --ink-hover: #ffffff;
    --ink-text: #161513;

    --accent: #f07032;
    --accent-hover: #f58a53;
    --accent-text: #ffffff;
    --accent-ink: #ffa877;
    --accent-soft: #2b1c13;
    --accent-border: #5a3620;
    --accent-glow: rgba(240, 112, 50, 0.2);

    --orb-1: #d98aa6;
    --orb-2: #7d8fe0;
    --orb-3: #a384dc;
    --orb-4: #f6ecff;

    --good: #79c495;
    --good-soft: #17241b;
    --good-border: #2c4a35;

    --warn: #e2ae55;
    --warn-soft: #2a2113;
    --warn-border: #554221;

    --bad: #ee8276;
    --bad-soft: #2d1815;
    --bad-border: #5a2d27;

    --info: #89b0d8;
    --info-soft: #162230;
    --info-border: #2c4460;

    --f-sheet: #79c495;
    --f-sheet-soft: #17241b;
    --f-doc: #89b0d8;
    --f-doc-soft: #162230;
    --f-pdf: #ee8276;
    --f-pdf-soft: #2d1815;
    --f-media: #b99be6;
    --f-media-soft: #231c30;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
    --shadow-pop: 0 24px 64px rgba(0, 0, 0, 0.65);
    --shadow-panel: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 8px 30px rgba(0, 0, 0, 0.35);
  }
}

/* ---- Explicit dark choice wins in both directions. ---- */
:root[data-theme="dark"] {
  --bg: #121110;
  --surface-1: #1b1a18;
  --surface-2: #211f1d;
  --surface-3: #2b2926;
  --surface-hover: #252320;
  --surface-sunken: #151413;
  --panel: #181715;

  --border: #2d2b27;
  --border-strong: #3b3833;

  --text: #efede9;
  --text-muted: #aaa59c;
  --text-dim: #7b766e;
  --text-inverse: #121110;

  --ink: #f2f0ec;
  --ink-hover: #ffffff;
  --ink-text: #161513;

  --accent: #f07032;
  --accent-hover: #f58a53;
  --accent-text: #ffffff;
  --accent-ink: #ffa877;
  --accent-soft: #2b1c13;
  --accent-border: #5a3620;
  --accent-glow: rgba(240, 112, 50, 0.2);

  --orb-1: #d98aa6;
  --orb-2: #7d8fe0;
  --orb-3: #a384dc;
  --orb-4: #f6ecff;

  --good: #79c495;
  --good-soft: #17241b;
  --good-border: #2c4a35;

  --warn: #e2ae55;
  --warn-soft: #2a2113;
  --warn-border: #554221;

  --bad: #ee8276;
  --bad-soft: #2d1815;
  --bad-border: #5a2d27;

  --info: #89b0d8;
  --info-soft: #162230;
  --info-border: #2c4460;

  --f-sheet: #79c495;
  --f-sheet-soft: #17241b;
  --f-doc: #89b0d8;
  --f-doc-soft: #162230;
  --f-pdf: #ee8276;
  --f-pdf-soft: #2d1815;
  --f-media: #b99be6;
  --f-media-soft: #231c30;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 24px 64px rgba(0, 0, 0, 0.65);
  --shadow-panel: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 8px 30px rgba(0, 0, 0, 0.35);
}