/* INN-89: Simple CRM's palette and type, from Miles's mockup (Slack, 8 Oct 2026) and the Chat MVP v0.2
   prototype (14 Oct 2026): the Tire Rack brand colors. Light, plus dark from the gear menu (System follows the computer). Fonts are the desk's own
   files (fonts/README.md), so no font host is ever called. */

@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/space-grotesk-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/ibm-plex-sans-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-mono-600-latin.woff2") format("woff2"); }

:root {
  /* v0.3: --scheme keeps native date and select pickers in the app theme. */
  --scheme: light; color-scheme: var(--scheme);
  --ink: #19170D; --ink-2: #3C3837; --ink-3: #666666; --ink-4: #A3A19C;
  --line: #D4D2CE; --line-2: #ECECEA;
  --canvas: #F1F0EE; --panel: #FFFFFF; --panel-2: #F7F6F4;
  --blue: #2B7088; --blue-ink: #1C4D5E; --blue-soft: #E4EEF2;
  --amber: #C67D15; --amber-ink: #8A5300; --amber-soft: #FDF1DD;
  --red: #D70000; --red-soft: #FDEAEA;
  --green: #5A8A2A; --green-ink: #3E6519; --green-soft: #EEF6E2;
  --nav: #D5D5D9; --nav-ink: #19170D; --nav-ink-2: #48484D;
  --nav-line: #BFBFC5; --nav-hover: rgba(0, 0, 0, .07); --nav-active: rgba(0, 0, 0, .12);
  --btn: #19170D; --btn-ink: #FFFFFF; --btn-hover: #000000;
  --scroll: #C9C6BD; --scroll-hover: #B5B2A8;
  --rep-bubble: #EEF3F5; --rep-line: #D9E3E7; --blue-line: #C9DCE3;
  --on-accent: #FFFFFF; --btn-key: rgba(255, 255, 255, .18); --plate: transparent;
  --shadow-pop: 0 10px 28px rgba(25, 23, 13, .14), 0 0 0 1px var(--line);
  --scrim: rgba(25, 23, 13, .32);

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --disp: "Space Grotesk", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* type scale (px): 12 13 14 15 18 24 30 */
  --t-xs: 12px; --t-sm: 13px; --t-md: 14px; --t-lg: 15px; --t-xl: 18px; --t-2xl: 24px; --t-3xl: 30px;
  /* spacing, 4px scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;
  /* radii: control, card, shell; plus full */
  --r-sm: 6px; --r-md: 10px; --r-lg: 18px; --r-full: 999px;
  --d-hover: 140ms; --d-state: 200ms; --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Dark, from the v0.2 prototype's palette (html[data-theme] is set by boot.js before first paint). */
:root[data-theme="dark"] {
  --scheme: dark;
  --ink: #F2F2F4; --ink-2: #C4C4CB; --ink-3: #9A9AA3; --ink-4: #64646D;
  --line: #34343B; --line-2: #26262A;
  --canvas: #0E0E10; --panel: #1A1A1D; --panel-2: #222226;
  --blue: #4FA3C0; --blue-ink: #C3DFE9; --blue-soft: #102C35; --blue-line: #1F4552;
  --amber: #F2A633; --amber-ink: #F6C77E; --amber-soft: #2E2109;
  --red: #FF6B74; --red-soft: #331417;
  --green: #8BC642; --green-ink: #B4DC85; --green-soft: #17240D;
  --nav: #17171A; --nav-ink: #F2F2F4; --nav-ink-2: #A8A8B0;
  --nav-line: #2A2A2F; --nav-hover: rgba(255, 255, 255, .07); --nav-active: rgba(255, 255, 255, .11);
  --btn: #F2F2F4; --btn-ink: #0E0E10; --btn-hover: #FFFFFF;
  --scroll: #33333A; --scroll-hover: #43434B;
  --rep-bubble: #16262C; --rep-line: #23404A;
  --on-accent: #0E0E10; --btn-key: rgba(0, 0, 0, .14); --plate: transparent;
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, .5), 0 0 0 1px var(--line);
  --scrim: rgba(0, 0, 0, .55);
}

/* Large text from the gear menu: every step of the type scale one notch up. */
:root[data-text="lg"] { --t-xs: 13px; --t-sm: 14px; --t-md: 16px; --t-lg: 17px; --t-xl: 20px; --t-2xl: 26px; --t-3xl: 32px; }

@media (prefers-reduced-motion: reduce) {
  :root { --d-hover: 0ms; --d-state: 0ms; }
}