/* MATTIE Design System — tokens, ge-vendored uit Claude Design-project
   mattie-design-system-09335c2a (2026-08-18). Bron: design/MATTIE-Chatoppervlak.dc.html.
   Fonts en Lucide-iconen komen per DS-keuze van jsDelivr CDN (known gap: vendoren
   zodra font-binaries er zijn). */

/* ---------- fonts ---------- */
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url("https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:italic;font-weight:400;font-display:swap;src:url("https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:400;font-display:swap;src:url("https://cdn.jsdelivr.net/fontsource/fonts/geist-sans@latest/latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:500;font-display:swap;src:url("https://cdn.jsdelivr.net/fontsource/fonts/geist-sans@latest/latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:600;font-display:swap;src:url("https://cdn.jsdelivr.net/fontsource/fonts/geist-sans@latest/latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:700;font-display:swap;src:url("https://cdn.jsdelivr.net/fontsource/fonts/geist-sans@latest/latin-700-normal.woff2") format("woff2")}

/* ---------- colors ----------
   Retheme 2026-08-18 (keuze Mark): visueel richting T3Code — échte (licht warme)
   neutralen i.p.v. koel slate, magenta-roze accent i.p.v. signaalblauw, en de
   statuskleur 'working' losgekoppeld van het accent (blijft signaalblauw).
   De --blue-*-tokennamen zijn historisch; ze dragen nu de accentwaarden. */
:root{
  --ink-0:#0A0A0B; --ink-1:#0F0F11; --ink-2:#151517; --ink-3:#1B1B1E; --ink-4:#232327; --ink-5:#2B2B30;
  --line-1:#1E1E22; --line-2:#2A2A2F; --line-3:#3B3B42;
  --fg-1:#EFEFF1; --fg-2:#A9A9B2; --fg-3:#75757D; --fg-4:#4F4F57; --fg-inverse:#0A0A0B;
  --blue-100:#CDEBF8; --blue-300:#5CB8E6; --blue-500:#008DC8; --blue-600:#0074A6; --blue-700:#005780;
  --blue-wash:rgba(0,141,200,.14); --blue-wash-strong:rgba(0,141,200,.26);
  --green-500:#3FD68C; --green-wash:rgba(63,214,140,.12);
  --red-500:#F2705F; --red-wash:rgba(242,112,95,.12);
  --amber-500:#F0B341; --amber-wash:rgba(240,179,65,.12);
  --violet-500:#A98BFA; --violet-wash:rgba(169,139,250,.12);
  --cyan-500:#4FD1D9; --cyan-wash:rgba(79,209,217,.12);
  --status-working:#4A9EFF; --status-completed:var(--green-500); --status-waiting:var(--amber-500);
  --status-failed:var(--red-500); --status-idle:var(--fg-4); --status-queued:var(--violet-500);
  --surface-app:var(--ink-0); --surface-rail:var(--ink-1); --surface-panel:var(--ink-2);
  --surface-raised:var(--ink-3); --surface-hover:var(--ink-4); --surface-active:var(--ink-5);
  --surface-code:var(--ink-3); --surface-overlay:#15181D; --surface-scrim:rgba(4,5,7,.66);
  --text-primary:var(--fg-1); --text-secondary:var(--fg-2); --text-muted:var(--fg-3); --text-disabled:var(--fg-4);
  --text-accent:var(--blue-500); --text-on-accent:#041520; --text-link:var(--blue-500); --text-link-hover:var(--blue-300);
  --text-added:var(--green-500); --text-removed:var(--red-500);
  --border-subtle:var(--line-1); --border-default:var(--line-2); --border-strong:var(--line-3);
  --border-accent:var(--blue-600); --border-focus:var(--blue-500);
  --control-bg:var(--ink-3); --control-bg-hover:var(--ink-4); --control-bg-active:var(--ink-5);
  --control-accent-bg:var(--blue-500); --control-accent-bg-hover:var(--blue-300); --control-accent-bg-active:var(--blue-600);
  --control-danger-bg:var(--red-500);
  --diff-add-bg:rgba(63,214,140,.09); --diff-del-bg:rgba(242,112,95,.09);
  --syntax-keyword:#A98BFA; --syntax-string:#3FD68C; --syntax-number:#F0B341; --syntax-fn:#4A9EFF;
  --syntax-comment:var(--fg-4); --syntax-punct:var(--fg-3);
}

/* ---------- typography ---------- */
:root{
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --font-display:var(--font-sans); --font-code:var(--font-mono);
  --text-10:10px; --text-11:11px; --text-12:12px; --text-13:13px; --text-14:14px; --text-15:15px;
  --text-17:17px; --text-20:20px; --text-25:25px; --text-32:32px; --text-42:42px;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --leading-flat:1; --leading-tight:1.18; --leading-snug:1.35; --leading-body:1.5; --leading-loose:1.7;
  --tracking-caps:.09em; --tracking-tight:-.011em; --tracking-mono:0;
  --type-display:var(--weight-semibold) var(--text-42)/var(--leading-tight) var(--font-display);
  --type-h1:var(--weight-semibold) var(--text-25)/var(--leading-tight) var(--font-display);
  --type-h2:var(--weight-semibold) var(--text-20)/var(--leading-snug) var(--font-display);
  --type-h3:var(--weight-medium) var(--text-15)/var(--leading-snug) var(--font-display);
  --type-body:var(--weight-regular) var(--text-14)/var(--leading-body) var(--font-sans);
  --type-body-sm:var(--weight-regular) var(--text-13)/var(--leading-body) var(--font-sans);
  --type-ui:var(--weight-medium) var(--text-13)/var(--leading-snug) var(--font-sans);
  --type-ui-sm:var(--weight-medium) var(--text-12)/var(--leading-snug) var(--font-sans);
  --type-mono:var(--weight-regular) var(--text-13)/var(--leading-snug) var(--font-mono);
  --type-mono-sm:var(--weight-regular) var(--text-12)/var(--leading-snug) var(--font-mono);
  --type-mono-xs:var(--weight-regular) var(--text-11)/var(--leading-snug) var(--font-mono);
  --type-code:var(--weight-regular) var(--text-13)/var(--leading-loose) var(--font-mono);
  --type-meta:var(--weight-regular) var(--text-11)/var(--leading-snug) var(--font-mono);
}

/* ---------- spacing ---------- */
:root{
  --sp-0:0px; --sp-1:2px; --sp-2:4px; --sp-3:6px; --sp-4:8px; --sp-5:10px; --sp-6:12px; --sp-7:14px;
  --sp-8:16px; --sp-9:20px; --sp-10:24px; --sp-11:32px; --sp-12:40px; --sp-13:56px; --sp-14:72px;
  --row-h-sm:26px; --row-h:30px; --row-h-lg:36px;
  --control-h-sm:24px; --control-h:30px; --control-h-lg:36px; --control-h-touch:44px;
  --topbar-h:48px; --rail-w:44px; --sidebar-w:272px; --gutter:16px; --gutter-tight:10px;
  --content-max:820px; --border-w:1px; --focus-w:2px;
}

/* ---------- radii (retheme: ruimer, T3-richting) ---------- */
:root{ --r-0:0px; --r-xs:3px; --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:12px; --r-2xl:16px; --r-full:999px; }

/* ---------- elevation ---------- */
:root{
  --shadow-none:none;
  --shadow-popover:0 8px 24px -6px rgba(0,0,0,.6),0 0 0 1px var(--line-2);
  --shadow-dialog:0 24px 64px -12px rgba(0,0,0,.7),0 0 0 1px var(--line-2);
  --shadow-sheet:0 -12px 40px -8px rgba(0,0,0,.65);
  --ring-focus:0 0 0 var(--focus-w) var(--blue-wash-strong),0 0 0 1px var(--blue-500);
  --ring-danger:0 0 0 var(--focus-w) var(--red-wash),0 0 0 1px var(--red-500);
  --inset-hairline:inset 0 1px 0 rgba(255,255,255,.03);
  --glow-accent:0 0 0 1px var(--blue-600),0 0 12px -2px rgba(74,158,255,.35);
  --fade-top:linear-gradient(to bottom,var(--ink-0),transparent);
  --fade-bottom:linear-gradient(to top,var(--ink-0),transparent);
  --blur-overlay:blur(10px) saturate(120%);
}

/* ---------- motion ---------- */
:root{
  --dur-instant:80ms; --dur-fast:120ms; --dur-base:170ms; --dur-slow:240ms; --dur-sheet:300ms;
  --ease-out:cubic-bezier(.22,.72,.28,1); --ease-in-out:cubic-bezier(.5,.05,.5,.95); --ease-exit:cubic-bezier(.4,0,1,1);
  --transition-control:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
  --transition-overlay:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
@keyframes mattie-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes mattie-spin{to{transform:rotate(360deg)}}
@keyframes mattie-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes mattie-rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-app);color:var(--text-primary);font:var(--type-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
code,kbd,pre,samp{font-family:var(--font-mono)}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:2px}
:focus-visible{outline:none;box-shadow:var(--ring-focus)}
::selection{background:var(--blue-wash-strong);color:var(--fg-1)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-2);border:3px solid transparent;background-clip:content-box;border-radius:var(--r-full)}
::-webkit-scrollbar-thumb:hover{background:var(--line-3);border:3px solid transparent;background-clip:content-box}