/* Kanaung design tokens.
 *
 * Lifted verbatim from the design system, not re-derived:
 *   ../kanaung-agents/.claude/skills/kanaung-design-system/tokens/
 *
 * That skill is the source of truth. If a value here drifts from it, this file
 * is wrong. Never introduce a hex, radius, shadow or duration that is not here.
 *
 * The system is light-only — there is no dark token set — so this site commits
 * to light and paints every colour explicitly. A dark section would need dark
 * tokens added to the design system first.
 */

:root {
  /* ---- ink ---- */
  --ink-1: #0D0E0F;
  --ink-2: #3F4145;
  --ink-3: #6E7178;
  --ink-4: #8E8F91;
  --ink-5: #AFB1B6;
  --ink-on-dark: #FFFFFF;
  --ink-on-dark-2: #BCBEC2;

  /* ---- brand ink: the one dark in the system ---- */
  --ink-brand: #1A1A2E;
  --ink-brand-hover: #2A2A45;

  /* ---- surfaces ---- */
  --white: #FFFFFF;
  --surface-canvas: #FCFCFC;
  --surface-panel: #FBFBFC;
  --surface-sunken: #F7F7F8;
  --surface-hover: #F4F5F6;
  --surface-selected: #EEEFF1;

  /* ---- lines ---- */
  --line-1: #EFF0F1;
  --line-2: #E5E6E9;
  --line-3: #DEE0E2;
  --line-4: #C9CCD0;

  /* ---- accent: Dodger Blue, the only colour in the UI ---- */
  --blue-50: #F0F6FE;
  --blue-100: #DCEAFD;
  --blue-500: #2E7CF6;
  --blue-600: #1B63D8;
  --blue-700: #1550AE;

  /* ---- semantic roles ---- */
  --bg-app: var(--surface-canvas);
  --bg-raised: var(--white);
  --bg-sunken: var(--surface-sunken);
  --bg-hover: var(--surface-hover);
  --bg-ai-wash: var(--blue-50);
  --bg-inverse: var(--ink-brand);

  --text-primary: var(--ink-1);
  --text-body: var(--ink-2);
  --text-secondary: var(--ink-3);
  --text-muted: var(--ink-4);
  --text-disabled: var(--ink-5);
  --text-inverse: var(--ink-on-dark);
  --text-inverse-2: var(--ink-on-dark-2);
  --text-link: var(--blue-600);
  --text-ai: var(--blue-600);

  --border-hairline: var(--line-1);
  --border-default: var(--line-2);
  --border-field: var(--line-3);
  --border-strong: var(--line-4);
  --border-focus: var(--blue-500);

  --action-primary: var(--ink-brand);
  --action-primary-hover: var(--ink-brand-hover);
  --action-accent: var(--blue-500);
  --action-accent-hover: var(--blue-600);

  /* ---- type ---- */
  --font-display: "Figtree", "GT Walsheim", -apple-system, sans-serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-micro: 11px;
  --fs-caption: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-title: 20px;
  --fs-h2: 24px;
  --fs-h1: 30px;
  --fs-display: 38px;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-display: -0.028em;
  --tracking-heading: -0.018em;
  --tracking-ui: -0.006em;
  --tracking-caps: 0.06em;

  /* ---- radius ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  /* ---- elevation ---- */
  --shadow-xs: 0 1px 2px rgba(13, 14, 15, 0.05);
  --shadow-sm: 0 1px 2px rgba(13, 14, 15, 0.04), 0 1px 3px rgba(13, 14, 15, 0.05);
  --shadow-card: 0 1px 2px rgba(13, 14, 15, 0.04), 0 4px 12px -6px rgba(13, 14, 15, 0.08);
  --shadow-composer: 0 1px 2px rgba(13, 14, 15, 0.04), 0 8px 24px -12px rgba(13, 14, 15, 0.14);
  --shadow-popover: 0 2px 4px rgba(13, 14, 15, 0.04), 0 16px 40px -12px rgba(13, 14, 15, 0.18);

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-instant: 80ms;
  --dur-fast: 130ms;
  --dur-base: 190ms;
  --dur-slow: 280ms;

  /* ---- site-only: the illustrated world is drawn in brand ink ---- */
  --dot: var(--ink-brand);
}