/* Lumio AI's colors and type, for the chat on the web. The tokens
   are Lumio Browser's (renderer/assets/theme.css), dark-first: the dark values
   are lumio-co.online's palette. Each color is light-dark(light, dark), so it
   follows the page's color scheme: the system's, unless
   <html data-appearance="light" | "dark"> picks one (core's setAppearance).
   No @import and no fonts: each shell loads its own. */
:root {
  color-scheme: light dark;

  /* surfaces */
  --bg: light-dark(#f3f3f5, #070708);
  --sidebar: light-dark(#ebebee, #0a0a0b);
  --panel: light-dark(#ffffff, #0c0c0e);
  --card: light-dark(#ffffff, #111114);
  --card2: light-dark(#fafafa, #0e0e11);
  --card-hover: light-dark(#f0f0f3, #1c1c1f);
  --field: light-dark(#e8e8eb, #18181b);
  --field-hover: light-dark(#e1e1e5, #1f1f23);
  --hover: light-dark(#0000000d, #18181b);
  --active: light-dark(#00000017, #26262a);
  --active-hover: light-dark(#00000021, #303033);
  --popover: light-dark(#ffffff, #161619);
  --popover-glass: light-dark(#fffffffa, #161619f5);
  --bubble: light-dark(#eeeef1, #202024);
  --box: light-dark(#ffffff, #18181b);
  --box-line: light-dark(#00000024, #36363b);
  --box-line-focus: light-dark(#0000003d, #4a4a52);
  --box-shadow: 0 18px 50px light-dark(#00000024, #0007);
  --switch-off: light-dark(#c4c4ca, #3a3a3e);
  --highlight: light-dark(#ffd54f80, #ffd47933);

  /* lines */
  --line: light-dark(#00000014, #ffffff14);
  --line-strong: light-dark(#00000024, #ffffff24);

  /* text */
  --text: light-dark(#18181b, #ededee);
  --text-strong: light-dark(#000000, #ffffff);
  --text-soft: light-dark(#3f3f46, #d6d6d8);
  --dim: light-dark(#52525b, #a3a3aa);
  --muted: light-dark(#5c5c64, #8a8a8a);
  /* 4.5:1 on every dark surface the label sits on, menus and hovered rows too
     (#7c7c84 was 4.3:1 on #18181b and #161619) */
  --label: light-dark(#64646c, #84848c);

  /* translucent steps: black in light, white in dark */
  --overlay-1: light-dark(#00000005, #ffffff06);
  --overlay-2: light-dark(#00000008, #ffffff0a);
  --overlay-3: light-dark(#0000000d, #ffffff10);
  --overlay-4: light-dark(#00000012, #ffffff14);
  --overlay-5: light-dark(#0000001a, #ffffff1f);
  --overlay-6: light-dark(#00000021, #ffffff24);
  --overlay-7: light-dark(#0000002e, #ffffff33);

  /* buttons */
  --primary-bg: light-dark(#18181b, #ededee);
  --primary-fg: light-dark(#fafafa, #0b0b0c);
  --primary-hover: light-dark(#000000, #ffffff);
  --on-accent: light-dark(#ffffff, #0b0b0c);
  --accent2: light-dark(#7c3aed, #c9a8ff);
  /* 3:1 against white in light (53% was 2.3:1), as the dark ring is */
  --focus-ring: light-dark(color-mix(in srgb, var(--accent) 85%, transparent), color-mix(in srgb, var(--accent) 53%, transparent));

  /* status: the plain color for icons and fills, -text for words */
  --danger: light-dark(#c5221f, #ff8a7a);
  --danger-text: light-dark(#b3261e, #ffb4a8);
  --danger-fill: light-dark(#c5221f, #ff7a7a);
  --on-danger: light-dark(#ffffff, #1a0a0a);
  --ok: light-dark(#137333, #7ee2a8);
  --ok-text: light-dark(#137333, #bff1d3);
  --warn: light-dark(#b06000, #f0b36b);
  --warn-text: light-dark(#9a5300, #ffcf99);
  --amber: light-dark(#a16207, #f5c542);

  /* depth */
  --shadow-xs: 0 2px 10px light-dark(#00000026, #000a);
  --shadow-sm: 0 6px 16px -4px light-dark(#0000002e, #000a), 0 1px 3px light-dark(#0000001a, #0006);
  --shadow-md: 0 14px 40px light-dark(#00000026, #000c);
  --shadow-lg: 0 18px 50px light-dark(#0000002e, #000c), 0 0 0 1px light-dark(#0000000f, #0006);
  --shadow-dialog: 0 30px 80px light-dark(#0000002e, #000c);
  --scrim: light-dark(#00000040, #0008);
  --sheet-scrim: light-dark(#0000001f, #0006);

  /* type */
  --font: 'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* motion */
  --dur-1: 90ms;
  --dur-2: 140ms;
  --dur-3: 200ms;
  --dur-4: 280ms;
  --dur-5: 380ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.55, 0, 1, .45);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease: var(--ease-out);
  /* springs (the browser's curve): the send/stop glyph, the usage circle's pulse */
  --ease-spring: linear(0, .091 4.2%, .284 8.3%, .498 12.5%, .687 16.7%, .832 20.8%, .933 25%, .994 29.2%, 1.026 33.3%, 1.037 37.5%, 1.037 41.7%, 1.031 45.8%, 1.023 50%, 1.015 54.2%, 1.009 58.3%, 1.004 62.5%, 1.001 66.7%, 1);
}
/* @lumio-tokens v1 (start): docs/design-system.md §3.9 */
:root {
  --r-tag: 6px; --r-control: 8px; --r-row: 10px; --r-card: 12px; --r-tile: 14px;
  --r-pop: 16px; --r-sheet: 20px; --r-composer: 22px; --r-pill: 999px;

  --sp-0-5: 2px; --sp-1: 4px; --sp-1-5: 6px; --sp-2: 8px; --sp-2-5: 10px; --sp-3: 12px; --sp-3-5: 14px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  --h-xs: 22px; --h-sm: 28px; --h-md: 34px; --h-lg: 40px;
  --icon-btn: 30px; --icon-btn-sm: 26px;

  --fs-display: 46px; --fs-h1: 38px; --fs-hero: clamp(32px, 5vw, 44px); --fs-h2: 30px; --fs-h3: 26px;
  --fs-title: 17px; --fs-read: 15px; --fs-body: 14px; --fs-ui: 13.5px; --fs-row: 13px;
  --fs-sm: 12.5px; --fs-xs: 12px; --fs-2xs: 11.5px; --fs-label: 10.5px;
  --lh-tight: 1.1; --lh-ui: 1.45; --lh-input: 1.5; --lh-read: 1.65;
  --track-label: .12em; --track-serif: -.01em;

  --z-sticky: 10; --z-popover: 30; --z-sheet: 40; --z-toast: 50; --z-drop: 60; --z-tooltip: 70;

  --sidebar-w: 244px; --topbar-h: 44px; --measure: 780px; --gutter: clamp(14px, 4vw, 24px);

  /* the composer, regular (a composer under 480px wide switches to compact: §6.3) */
  --cmp-ctl: 32px; --cmp-send: 34px; --cmp-gap: 6px; --cmp-font: 15px; --cmp-chip-font: 13px;
  --cmp-icon: 16px; --cmp-ring: 20px;

  --usage-track: var(--overlay-5);
  --usage-low: var(--dim);
  --usage-half: var(--accent);
  --usage-high: var(--amber);
  --usage-full: var(--danger);

  --rec-fill: light-dark(#e5372f, #e5372f);
  --on-rec: light-dark(#ffffff, #ffffff);

  --bypass-bg: color-mix(in srgb, var(--danger-fill) 12%, transparent);
  --bypass-line: color-mix(in srgb, var(--danger-fill) 30%, transparent);
  --bypass-text: var(--danger-text);

  --diff-add: light-dark(#137333, #8be0a8);
  --diff-del: light-dark(#b3261e, #ff9d90);
  --diff-add-bg: light-dark(#e6f4ea, #0f2a1a);
  --diff-del-bg: light-dark(#fce8e6, #2e1212);
}
/* @lumio-tokens v1 (end) */
:root[data-appearance="dark"] { color-scheme: dark; }
:root[data-appearance="light"] { color-scheme: light; }

/* The accent, chosen here instead of with light-dark() so it reads back in JS
   as a plain color. */
:root { --accent: #86b7ff; }
@media (prefers-color-scheme: light) {
  :root:not([data-appearance="dark"]) { --accent: #2563eb; }
}
:root[data-appearance="light"] { --accent: #2563eb; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  /* spinners keep turning, slower (everything else finishes at once) */
  .lc-spin { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
}

:where(:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

@media (prefers-reduced-transparency: reduce) {
  :root { --popover-glass: var(--popover); }
}
@media (prefers-contrast: more) {
  :root {
    --line: light-dark(#00000040, #ffffff40);
    --line-strong: light-dark(#00000066, #ffffff66);
    --dim: light-dark(#2e2e33, #d4d4d8);
    --label: light-dark(#3f3f46, #b4b4bb);
    --focus-ring: var(--accent);
  }
}