/* ============================================================
   tokens.css — design tokens
   Design language modeled on GitHub Primer (the system behind
   Copilot's UI): system fonts, neutral canvas, restrained accent,
   precise control sizing. Open source (MIT). Light + dark.
   ONE source of truth for color, size, spacing, radius, motion.
   ============================================================ */

:root {
  /* ---------- Type (system stack — zero font dependency) ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-0: 12px;   /* small / meta */
  --fs-1: 14px;   /* body (default) */
  --fs-2: 16px;   /* emphasized body / titles */
  --fs-3: 20px;   /* section heading */
  --fs-4: 24px;   /* page / dialog heading */
  --fs-5: 32px;   /* hero */
  --lh: 1.5;

  /* ---------- Spacing scale (8px base, 4px half-steps) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 40px; --s-8: 48px; --s-9: 64px;

  /* ---------- Control sizing (single source of truth) ---------- */
  --control-h: 32px;          /* every button / input / select */
  --control-h-sm: 28px;
  --control-h-lg: 40px;
  --control-pad-x: 12px;
  --control-gap: 8px;
  --icon-size: 16px;          /* every inline icon */
  --icon-size-lg: 20px;
  --tap: 32px;                /* square icon-button hit area */

  /* ---------- Radius ---------- */
  --r-1: 6px;     /* controls, inputs */
  --r-2: 8px;     /* cards, menus */
  --r-3: 12px;    /* dialogs */
  --r-full: 999px;

  /* ---------- Border ---------- */
  --bw: 1px;

  /* ---------- Color : LIGHT (Primer light) ---------- */
  --canvas: #ffffff;            /* app background */
  --canvas-inset: #f6f8fa;      /* sunken areas, code, fields */
  --canvas-subtle: #f6f8fa;
  --surface: #ffffff;           /* cards, menus */
  --surface-raised: #ffffff;

  --fg-default: #1f2328;
  --fg-muted: #59636e;
  --fg-subtle: #818b98;
  --fg-on-emphasis: #ffffff;

  --border-default: #d1d9e0;
  --border-muted: #d1d9e0b3;
  --border-strong: #b7bfc7;

  --accent-fg: #0969da;
  --accent-emphasis: #0969da;
  --accent-muted: #54aeff66;
  --accent-subtle: #ddf4ff;

  --success-fg: #1a7f37;
  --success-emphasis: #1f883d;
  --success-subtle: #dafbe1;
  --attention-fg: #9a6700;
  --attention-emphasis: #bf8700;
  --attention-subtle: #fff8c5;
  --danger-fg: #d1242f;
  --danger-emphasis: #cf222e;
  --danger-subtle: #ffebe9;
  --done-fg: #8250df;
  --done-subtle: #fbefff;
  --done-emphasis: #8250df;

  /* neutral button (Primer default btn) */
  --btn-bg: #f6f8fa;
  --btn-border: #d1d9e0;
  --btn-hover-bg: #eaeef2;
  --btn-hover-border: #d1d9e0;
  --btn-active-bg: #e6eaef;

  /* primary button */
  --btn-primary-bg: #1f883d;
  --btn-primary-hover-bg: #1a7f37;
  --btn-primary-border: #1f883d33;

  /* state overlays */
  --neutral-hover: #818b9814;
  --neutral-active: #818b9826;

  --overlay-backdrop: #1f232899;
  --shadow-sm: 0 1px 0 rgba(31,35,40,0.04);
  --shadow-md: 0 3px 6px rgba(140,149,159,0.15);
  --shadow-lg: 0 8px 24px rgba(140,149,159,0.2);
  --mark-bg: #fff8c5;
  --mark-fg: #1f2328;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-1: 80ms;
  --dur-2: 160ms;
  --dur-3: 240ms;
}

[data-theme="dark"] {
  --canvas: #0d1117;
  --canvas-inset: #010409;
  --canvas-subtle: #161b22;
  --surface: #161b22;
  --surface-raised: #21262d;

  --fg-default: #f0f6fc;
  --fg-muted: #9198a1;
  --fg-subtle: #6e7681;
  --fg-on-emphasis: #ffffff;

  --border-default: #3d444d;
  --border-muted: #3d444db3;
  --border-strong: #565d66;

  --accent-fg: #4493f8;
  --accent-emphasis: #1f6feb;
  --accent-muted: #388bfd66;
  --accent-subtle: #388bfd1a;

  --success-fg: #3fb950;
  --success-emphasis: #238636;
  --success-subtle: #2ea04326;
  --attention-fg: #d29922;
  --attention-emphasis: #9e6a03;
  --attention-subtle: #bb800926;
  --danger-fg: #f85149;
  --danger-emphasis: #da3633;
  --danger-subtle: #f8514926;
  --done-fg: #ab7df8;
  --done-subtle: #ab7df81a;
  --done-emphasis: #8957e5;

  --btn-bg: #21262d;
  --btn-border: #3d444d;
  --btn-hover-bg: #30363d;
  --btn-hover-border: #444c56;
  --btn-active-bg: #282e33;

  --btn-primary-bg: #238636;
  --btn-primary-hover-bg: #2ea043;
  --btn-primary-border: #f0f6fc1a;

  --neutral-hover: #6e768114;
  --neutral-active: #6e768126;

  --overlay-backdrop: #010409cc;
  --shadow-sm: 0 0 transparent;
  --shadow-md: 0 3px 6px #010409;
  --shadow-lg: 0 8px 24px #010409;
  --mark-bg: #bb800966;
  --mark-fg: #f0f6fc;
}

/* ---- compatibility aliases for inline styles still in the JS ---- */
:root, [data-theme="dark"] {
  --background: var(--canvas);
  --text-primary: var(--fg-default);
  --text-secondary: var(--fg-muted);
  --text-helper: var(--fg-subtle);
  --border-subtle: var(--border-default);
  --link-primary: var(--accent-fg);
  --interactive: var(--accent-fg);
  --support-error: var(--danger-fg);
  --support-success: var(--success-fg);
  --tag-gray-bg: var(--canvas-inset);
  --tag-gray-text: var(--fg-muted);
}