/* ===== Design tokens — single source of truth ===== */
@layer reset, tokens, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  html, body { height: 100%; }
  body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--bg);
    color: var(--text);
  }
  img, svg, video { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; padding: 0; }
  table { border-collapse: collapse; }
  :where(h1, h2, h3, h4) { font-weight: 600; line-height: 1.3; }
  :focus { outline: none; }
  :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
  ::selection { background: var(--primary-bg); }
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
}

@layer tokens {
  :root {
    /* — Surface palette — */
    --bg: #fafafa;
    --surface: #ffffff;
    --surface-2: #f4f4f5;
    --surface-3: #e4e4e7;

    /* — Sidebar (dark) — */
    --sb-bg: #18181b;
    --sb-hover: #27272a;
    --sb-active: #3f3f46;
    --sb-text: #fafafa;
    --sb-muted: #a1a1aa;
    --sb-border: #27272a;

    /* — Text — */
    --text: #18181b;
    --text-2: #52525b;
    --muted: #a1a1aa;
    --placeholder: #c4c4c8;

    /* — Borders — */
    --border: #e4e4e7;
    --border-strong: #d4d4d8;

    /* — Primary (indigo) — */
    --primary: #6366f1;
    --primary-hover: #5558e3;
    --primary-active: #4f46e5;
    --primary-bg: #eef2ff;
    --primary-bg-2: #e0e7ff;
    --on-primary: #ffffff;

    /* — Semantic — */
    --danger: #ef4444;
    --danger-hover: #dc2626;
    --danger-bg: #fef2f2;
    --warning: #f59e0b;
    --warning-bg: #fffbeb;
    --success: #22c55e;
    --success-bg: #f0fdf4;

    /* — Speaker colors — */
    --c-user: #6366f1;
    --c-user-bg: #eef2ff;
    --c-persona: #0ea5e9;
    --c-persona-bg: #f0f9ff;
    --c-external: #14b8a6;
    --c-external-bg: #f0fdfa;
    --c-system: #a1a1aa;
    --c-system-bg: #f4f4f5;

    /* — Typography — */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", "PingFang TC", "Noto Sans TC", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --fs-xs: 0.75rem;
    --fs-sm: 0.84375rem;
    --fs-base: 0.9375rem;
    --fs-lg: 1.0625rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;

    /* — Spacing — */
    --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;
    --s-4: 1rem;     --s-5: 1.25rem;  --s-6: 1.5rem;
    --s-8: 2rem;     --s-10: 2.5rem;  --s-12: 3rem;

    /* — Radius — */
    --r-sm: 6px;
    --r: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-full: 999px;

    /* — Shadow — */
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04), 0 1px 3px rgb(0 0 0 / 0.06);
    --shadow-md: 0 4px 6px rgb(0 0 0 / 0.04), 0 2px 4px rgb(0 0 0 / 0.04);
    --shadow-lg: 0 10px 24px rgb(0 0 0 / 0.08), 0 4px 8px rgb(0 0 0 / 0.04);
    --shadow-primary: 0 2px 8px rgb(99 102 241 / 0.3);

    /* — Controls — */
    --ctrl-sm: 2rem;
    --ctrl: 2.5rem;
    --ctrl-lg: 3rem;
    --ring: 0 0 0 3px rgb(99 102 241 / 20%);

    /* — Layout — */
    --sidebar-w: 16rem;
    --content-w: 44rem;
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
  }
  .text-danger { color: var(--danger); }
  .text-muted { color: var(--muted); }
  .text-secondary { color: var(--text-2); }
  .text-center { text-align: center; }
  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}