/*
 * Questie Labs design tokens (placeholder set).
 * Replace this file with the generated tokens from the Questie Labs design
 * system. app.css only uses the semantic tokens (second block), never the
 * primitives, so swapping values here restyles the whole app.
 */

:root {
  /* Primitives ----------------------------------------------------------- */
  --ql-ink-950: #0e1116;
  --ql-ink-900: #161a21;
  --ql-ink-800: #1f242d;
  --ql-ink-700: #2b313c;
  --ql-ink-600: #434a57;
  --ql-ink-500: #5f6775;
  --ql-ink-400: #8a919d;
  --ql-ink-300: #b6bbc4;
  --ql-ink-200: #d9dce1;
  --ql-ink-100: #eceef1;
  --ql-ink-50: #f6f7f9;
  --ql-white: #ffffff;

  --ql-teal-700: #0b5e5a;
  --ql-teal-600: #0f766e;
  --ql-teal-500: #14958b;
  --ql-teal-300: #5fd0c4;
  --ql-teal-100: #d5f3ef;
  --ql-teal-900: #0b2f2c;

  --ql-red-600: #c0392b;
  --ql-red-300: #f08b7e;
  --ql-red-100: #fde4e0;
  --ql-red-900: #3d1611;
  --ql-amber-600: #b26b00;
  --ql-amber-300: #f2bb5c;
  --ql-amber-100: #fdf0d6;
  --ql-amber-900: #3a2605;
  --ql-green-600: #1e7f3c;
  --ql-green-300: #74d08f;
  --ql-green-100: #dcf3e3;
  --ql-green-900: #10301b;

  --ql-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ql-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Semantic tokens: light ------------------------------------------------ */
  --color-bg: var(--ql-ink-50);
  --color-surface: var(--ql-white);
  --color-surface-sunken: var(--ql-ink-100);
  --color-border: var(--ql-ink-200);
  --color-border-strong: var(--ql-ink-300);
  --color-text: var(--ql-ink-900);
  --color-text-muted: var(--ql-ink-500);
  --color-text-inverse: var(--ql-white);
  --color-accent: var(--ql-teal-600);
  --color-accent-hover: var(--ql-teal-700);
  --color-accent-subtle: var(--ql-teal-100);
  --color-accent-text: var(--ql-teal-700);
  --color-focus: var(--ql-teal-500);
  --color-danger: var(--ql-red-600);
  --color-danger-subtle: var(--ql-red-100);
  --color-warning: var(--ql-amber-600);
  --color-warning-subtle: var(--ql-amber-100);
  --color-success: var(--ql-green-600);
  --color-success-subtle: var(--ql-green-100);
  --color-log-bg: var(--ql-ink-950);
  --color-log-text: var(--ql-ink-100);

  --font-body: var(--ql-font-sans);
  --font-mono: var(--ql-font-mono);
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-md: 0.9375rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 650;
  --line-height-tight: 1.25;
  --line-height-body: 1.5;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(14 17 22 / 0.06);
  --shadow-md: 0 4px 16px rgb(14 17 22 / 0.08);

  --size-sidebar: 15rem;
  --size-content: 72rem;
  --size-control: 2.25rem;

  --motion-fast: 120ms;
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--ql-ink-950);
    --color-surface: var(--ql-ink-900);
    --color-surface-sunken: var(--ql-ink-800);
    --color-border: var(--ql-ink-700);
    --color-border-strong: var(--ql-ink-600);
    --color-text: var(--ql-ink-100);
    --color-text-muted: var(--ql-ink-400);
    --color-text-inverse: var(--ql-ink-950);
    --color-accent: var(--ql-teal-300);
    --color-accent-hover: var(--ql-teal-100);
    --color-accent-subtle: var(--ql-teal-900);
    --color-accent-text: var(--ql-teal-300);
    --color-danger: var(--ql-red-300);
    --color-danger-subtle: var(--ql-red-900);
    --color-warning: var(--ql-amber-300);
    --color-warning-subtle: var(--ql-amber-900);
    --color-success: var(--ql-green-300);
    --color-success-subtle: var(--ql-green-900);
    --color-log-bg: #07090c;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 16px rgb(0 0 0 / 0.4);
  }
}