/*
 * Design tokens. Surface ladder + hairline borders inspired by Linear
 * ("midnight precision instrument"), keycap + layered shadows by Raycast.
 * Themes: [data-theme="dark" | "light"], accent: [data-accent="…"].
 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/vendor/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/vendor/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('/vendor/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
}

:root {
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-2xs: 10.5px;
  --text-xs: 11.5px;
  --text-sm: 12.5px;
  --text-md: 13px;
  --text-lg: 15px;
  --text-xl: 18px;

  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --fast: 120ms;
  --med: 200ms;

  --topbar-h: 48px;
  --cmdbar-h: 44px;
  --statusbar-h: 28px;

  /* default accent (indigo) — overridden by [data-accent] below */
  --accent: #6e6ff2;
  --accent-fg: #ffffff;
}

/* ------------------------------------------------------------------ dark */
:root,
[data-theme='dark'] {
  color-scheme: dark;
  --bg: #08090a;
  --panel: #0e0f11;
  --panel-2: #121315;
  --raised: #17181b;
  --hover: rgba(255, 255, 255, 0.045);
  --active: rgba(255, 255, 255, 0.075);
  --border: #1f2125;
  --border-strong: #2c2f34;
  --divider: #18191c;

  --text: #e6e6e8;
  --text-strong: #ffffff;
  --text-muted: #8a8f98;
  --text-faint: #5d6169;

  --input-bg: #0b0c0d;
  --scrim: rgba(3, 4, 6, 0.66);
  --checker-a: #15161a;
  --checker-b: #1b1c21;

  --danger: #f06363;
  --danger-soft: rgba(240, 99, 99, 0.12);
  --success: #3ccf8e;
  --warning: #f1b44c;

  --shadow-pop: rgba(0, 0, 0, 0.5) 0 16px 40px -8px, rgba(0, 0, 0, 0.8) 0 0 0 0.5px,
    rgba(255, 255, 255, 0.06) 0 0.5px 0 0 inset;
  --shadow-modal: rgba(0, 0, 0, 0.55) 0 30px 80px -10px, rgba(0, 0, 0, 0.9) 0 0 0 0.5px,
    rgba(255, 255, 255, 0.07) 0 0.5px 0 0 inset;
  --shadow-key: rgba(0, 0, 0, 0.4) 0 1px 0 0, rgba(255, 255, 255, 0.08) 0 0.5px 0 0 inset;
  --shadow-tile: rgba(0, 0, 0, 0.35) 0 1px 2px 0;

  --toast-bg: #1d1e22;
  --toast-text: #f1f1f3;

  --syn-keyword: #c792ea;
  --syn-string: #a5d6a7;
  --syn-number: #f6b97b;
  --syn-comment: #5d6169;
  --syn-fn: #82aaff;
  --syn-type: #ffcb6b;
  --syn-prop: #89ddff;
  --syn-tag: #f07178;
}

/* ----------------------------------------------------------------- light */
[data-theme='light'] {
  color-scheme: light;
  --bg: #f4f4f6;
  --panel: #ffffff;
  --panel-2: #fafafb;
  --raised: #ffffff;
  --hover: rgba(15, 17, 26, 0.045);
  --active: rgba(15, 17, 26, 0.075);
  --border: #e6e6ea;
  --border-strong: #d6d6dc;
  --divider: #ededf0;

  --text: #23242a;
  --text-strong: #0c0d10;
  --text-muted: #6b6e78;
  --text-faint: #9a9da6;

  --input-bg: #ffffff;
  --scrim: rgba(18, 20, 28, 0.36);
  --checker-a: #f1f1f4;
  --checker-b: #e7e7ec;

  --danger: #dc3b3b;
  --danger-soft: rgba(220, 59, 59, 0.09);
  --success: #18a058;
  --warning: #c98a12;

  --shadow-pop: rgba(16, 18, 27, 0.12) 0 12px 32px -6px, rgba(16, 18, 27, 0.08) 0 0 0 1px;
  --shadow-modal: rgba(16, 18, 27, 0.2) 0 30px 70px -12px, rgba(16, 18, 27, 0.08) 0 0 0 1px;
  --shadow-key: rgba(16, 18, 27, 0.12) 0 1px 0 0, rgba(16, 18, 27, 0.08) 0 0 0 1px inset;
  --shadow-tile: rgba(16, 18, 27, 0.06) 0 1px 2px 0;

  --toast-bg: #1f2026;
  --toast-text: #f4f4f6;

  --syn-keyword: #8839ef;
  --syn-string: #2f8a3a;
  --syn-number: #c4620c;
  --syn-comment: #9a9da6;
  --syn-fn: #1e66f5;
  --syn-type: #b27a00;
  --syn-prop: #0b7f9e;
  --syn-tag: #d20f39;
}

/* --------------------------------------------------------------- accents */
[data-accent='indigo'] { --accent: #6e6ff2; --accent-fg: #ffffff; }
[data-accent='blue']   { --accent: #3b82f6; --accent-fg: #ffffff; }
[data-accent='sky']    { --accent: #0ea5e9; --accent-fg: #ffffff; }
[data-accent='teal']   { --accent: #14b8a6; --accent-fg: #03201c; }
[data-accent='green']  { --accent: #22c55e; --accent-fg: #04210f; }
[data-accent='lime']   { --accent: #c6d81f; --accent-fg: #161a02; }
[data-accent='amber']  { --accent: #f59e0b; --accent-fg: #221500; }
[data-accent='coral']  { --accent: #ff6363; --accent-fg: #ffffff; }
[data-accent='pink']   { --accent: #ec4899; --accent-fg: #ffffff; }
[data-accent='violet'] { --accent: #8b5cf6; --accent-fg: #ffffff; }
[data-accent='mono']   { --accent: #e6e6e8; --accent-fg: #0c0d10; }
[data-theme='light'][data-accent='mono'] { --accent: #23242a; --accent-fg: #ffffff; }
[data-theme='light'][data-accent='lime'] { --accent: #8ea10b; --accent-fg: #ffffff; }

/* Derived accent shades — work for any accent in either theme. */
:root {
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-softer: color-mix(in srgb, var(--accent) 8%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 55%, transparent);
  --accent-hover: color-mix(in srgb, var(--accent) 86%, var(--text-strong));
  --accent-text: color-mix(in srgb, var(--accent) 78%, var(--text-strong));
  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}