/* The design's tokens, kept by hand. Its generator (design/gen) did not come
   across with the rewrite, so a change here is made in
   hoverlet/internal/ui/designtokens.go too — the panel wears the same colours. */

:root {
  color-scheme: light dark;

  --c-canvas: #EDF2F4;
  --c-surface: #FFFFFF;
  --c-raised: #F4F8F9;
  --c-ink: #0F1B20;
  --c-ink2: #43545C;
  --c-ink3: #5B6B73;
  --c-line: #D3DEE3;
  --c-accent: #0E7490;
  --c-on-accent: #FFFFFF;
  /* The accent as three channels, for forji's chat, which tints with rgba(var(--tint), a). */
  --c-accent-rgb: 14, 116, 144;
  --c-danger: #B3123C;
  --c-warn: #8A5A00;
  --c-key: #0B5F73;
  --c-ok: #0A6B4B;
  --c-scrim: #0B1E2833;
  --c-mark1: #1BAF7A;
  --c-mark2: #4A3AA7;
  --c-mark3: #E87BA4;
  --c-mark4: #2A78D6;
  --c-mark5: #008300;

  --s-xs: 2px;
  --s-sm: 4px;
  --s-md: 8px;
  --s-lg: 12px;
  --s-xl: 16px;
  --s-2xl: 20px;
  --s-3xl: 24px;
  --s-4xl: 32px;
  --s-5xl: 48px;

  --tap: 44px;
  --tap-sm: 34px;

  --r-card: 16px;
  --r-control: 10px;
  --r-inset: 8px;
  --r-cell: 4px;
  --r-pill: 999px;

  --font-sans: "Rubik", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --t-micro: 13px;
  --t-small: 14px;
  --t-body: 16px;
  --t-callout: 18px;
  --t-title: 22px;
  --t-large: 28px;
  --t-display: 36px;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --track-title: -0.01em;

  --board-max: 480px;
  --board-max-cols: 8;
  --board-gap: 12px;
  --board-pad: 16px;
  --board-row-ratio: 0.92;
  --split-at: 1024px;
  --desktop-unit: 1.3;
  --stage-top: 8px;
  --stage-fade: 28px;
  --card-scale-min: 0.85;
  --card-scale-max: 1.1;
  --card-scale-max-desktop: 1.45;

  --lift: 0 14px 34px #0B1E2826;

  --m-fast: 140ms;
  --m-base: 260ms;
  --m-slow: 380ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --longpress: 450ms;

  --blur-board: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-canvas: #0C1215;
    --c-surface: #141C20;
    --c-raised: #1B252A;
    --c-ink: #E8F0F2;
    --c-ink2: #A9B8BF;
    --c-ink3: #7F8E95;
    --c-line: #27353B;
    --c-accent: #22C3E0;
    --c-on-accent: #04232B;
    --c-accent-rgb: 34, 195, 224;
    --c-danger: #FF7D9A;
    --c-warn: #E8B85C;
    --c-key: #7FD6E6;
    --c-ok: #4FE09B;
    --c-scrim: #00000085;
    --c-mark1: #199E70;
    --c-mark2: #9085E9;
    --c-mark3: #D55181;
    --c-mark4: #3987E5;
    --c-mark5: #008300;
    --lift: 0 14px 34px #00000073;
  }
}

/* One place, not per rule: every motion token collapses to zero. */
@media (prefers-reduced-motion: reduce) {
  :root { --m-fast: 0ms; --m-base: 0ms; --m-slow: 0ms; }
}