/* Grapim design tokens, shared by the review desk (ui/styles.css) and the
   hub (src/hub/pages/hub.css, which loads this file as /hub/static/tokens.css),
   so the two cannot drift. Colour, type, radius, shadow, focus and motion.
   Light by default, dark from the system or from [data-theme]. */

/* Inter and JetBrains Mono, variable, self-hosted (SIL OFL 1.1, ui/fonts/LICENSE-*).
   Latin only; Chinese and other scripts fall through to the system fonts below. */
@font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("fonts/inter-latin.woff2") format("woff2");
  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: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono Variable"; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
  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: "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  --mono: "JetBrains Mono Variable", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;
  /* One type scale, seven steps plus a display size for the headline numbers. */
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px; --fs-20: 20px; --fs-24: 24px; --fs-display: 40px; --fs-display-sm: 32px;
  /* Inter's single-storey a and open digits read better at 12-13px UI sizes. */
  --font-features: "cv11", "ss01", "calt";

  --bg: #fafafa;
  --surface: #ffffff;
  --surface-2: #f4f4f5;
  --surface-3: #e4e4e7;
  --border: #e4e4e7;
  --border-strong: #d4d4d8;
  --text: #09090b;
  --text-2: #52525b;
  --text-3: #71717a;
  --accent: #4048c8;
  --accent-hover: #3239b0;
  --accent-text: #3a42bd;
  --accent-bg: #ecedfc;
  --on-accent: #ffffff;
  --focus: #4048c8;

  --add-text: #17723a;
  --add-bg: #e6f5ea;
  --add-strong: #c5e9cf;
  --del-text: #b42a25;
  --del-bg: #fcebea;
  --del-strong: #f6cdca;
  --warn-text: #8a5600;
  --warn-bg: #fdf2dc;
  --warn-border: #f0d39b;
  --danger: #b42a25;
  --danger-hover: #9c211d;
  --danger-bg: #fcebea;
  --ok-text: #17723a;
  --ok-bg: #e6f5ea;

  /* Agent colours: distinct hues, each at least 3:1 against the surface. */
  --a0: #0d8073;
  --a1: #b06400;
  --a2: #8446cc;
  --a3: #c0336f;
  --a4: #1b6fb8;
  --a5: #687a0e;
  --a6: #c4492a;
  --a7: #4f5aa6;
  --outside: #a1a1aa;

  --code-kw: #8b2fc9;
  --code-str: #1a6e3a;
  --code-num: #a05a00;
  --code-com: #71717a;
  --code-fn: #2a55b5;

  --shadow-1: 0 1px 2px rgb(20 20 15 / 0.06);
  --shadow-pop: 0 1px 2px rgb(20 20 15 / 0.08), 0 12px 32px -8px rgb(20 20 15 / 0.24);
  --radius: 6px;
  --radius-lg: 10px;
  --sidebar: 232px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f0f11;
  --surface: #161618;
  --surface-2: #1d1d20;
  --surface-3: #27272b;
  --border: #26262a;
  --border-strong: #37373d;
  --text: #ededee;
  --text-2: #b0b0b6;
  --text-3: #93939a;
  --accent: #8a90f7;
  --accent-hover: #a2a7fa;
  --accent-text: #a5aaff;
  --accent-bg: #23244a;
  --on-accent: #0f0f11;
  --focus: #8a90f7;
  --add-text: #63d57f;
  --add-bg: rgb(46 160 67 / 0.14);
  --add-strong: rgb(46 160 67 / 0.32);
  --del-text: #ff8078;
  --del-bg: rgb(248 81 73 / 0.13);
  --del-strong: rgb(248 81 73 / 0.32);
  --warn-text: #f2b552;
  --warn-bg: rgb(242 181 82 / 0.1);
  --warn-border: rgb(242 181 82 / 0.32);
  --danger: #f2655d;
  --danger-hover: #ff7d76;
  --danger-bg: rgb(248 81 73 / 0.13);
  --ok-text: #63d57f;
  --ok-bg: rgb(46 160 67 / 0.14);
  --a0: #3ec9b8;
  --a1: #f0a640;
  --a2: #b993f6;
  --a3: #f27bb0;
  --a4: #62aef0;
  --a5: #b6cc4c;
  --a6: #f58b6c;
  --a7: #9da6e6;
  --outside: #85858c;
  --code-kw: #c9a0ff;
  --code-str: #8fd6a2;
  --code-num: #f0b46a;
  --code-com: #8e8e96;
  --code-fn: #8cb8ff;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-pop: 0 1px 2px rgb(0 0 0 / 0.5), 0 16px 40px -8px rgb(0 0 0 / 0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f0f11;
    --surface: #161618;
    --surface-2: #1d1d20;
    --surface-3: #27272b;
    --border: #26262a;
    --border-strong: #37373d;
    --text: #ededee;
    --text-2: #b0b0b6;
    --text-3: #93939a;
    --accent: #8a90f7;
    --accent-hover: #a2a7fa;
    --accent-text: #a5aaff;
    --accent-bg: #23244a;
    --on-accent: #0f0f11;
    --focus: #8a90f7;
    --add-text: #63d57f;
    --add-bg: rgb(46 160 67 / 0.14);
    --add-strong: rgb(46 160 67 / 0.32);
    --del-text: #ff8078;
    --del-bg: rgb(248 81 73 / 0.13);
    --del-strong: rgb(248 81 73 / 0.32);
    --warn-text: #f2b552;
    --warn-bg: rgb(242 181 82 / 0.1);
    --warn-border: rgb(242 181 82 / 0.32);
    --danger: #f2655d;
    --danger-hover: #ff7d76;
    --danger-bg: rgb(248 81 73 / 0.13);
    --ok-text: #63d57f;
    --ok-bg: rgb(46 160 67 / 0.14);
    --a0: #3ec9b8;
    --a1: #f0a640;
    --a2: #b993f6;
    --a3: #f27bb0;
    --a4: #62aef0;
    --a5: #b6cc4c;
    --a6: #f58b6c;
    --a7: #9da6e6;
    --outside: #85858c;
    --code-kw: #c9a0ff;
    --code-str: #8fd6a2;
    --code-num: #f0b46a;
    --code-com: #8e8e96;
    --code-fn: #8cb8ff;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-pop: 0 1px 2px rgb(0 0 0 / 0.5), 0 16px 40px -8px rgb(0 0 0 / 0.6);
  }
}

/* Motion: one vocabulary for the desk and the hub. Operate surfaces move
   little and fast: ease-out, 120 to 240 ms, transform and opacity only. */
:root {
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 240ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}