/* tokens.css: the design tokens of 07 §1, light and dark. Nothing else in the UI uses raw values (07 §0.4). */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: local("IBM Plex Sans"), url("../fonts/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: local("IBM Plex Sans Medium"), url("../fonts/IBMPlexSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: local("IBM Plex Sans SemiBold"), url("../fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: local("IBM Plex Mono"), url("../fonts/IBMPlexMono-Regular.woff2") format("woff2"); }

:root {
  color-scheme: light;
  /* 1.1 colour, light */
  --bg: #F6F5F1; --surface: #FFFFFF; --surface-2: #EEECE6; --surface-3: #E4E1D9;
  --grid: #E2DFD7; --grid-major: #D6D2C8;
  --ink: #1E2126; --ink-2: #5B6068; --ink-3: #7D828B;
  --line: #D5D1C7; --line-strong: #A9A49A;
  --accent: #0F7B6C; --accent-hover: #0B6659; --accent-soft: #DDF0EC; --accent-ink: #FFFFFF; --focus: #0F7B6C;
  --ok: #2E7D32; --ok-soft: #E3F1E4; --warn: #B26A00; --warn-soft: #FBEBD2;
  --fail: #B3261E; --fail-soft: #F9E0DE; --info: #1F6FB2; --info-soft: #DEEBF7;
  /* Szenarios (2026-10-08): weave Szenario violet, outside app teal */
  --sz: #6B3FB5; --sz-soft: #EEE6FA; --app: #0F7A72; --app-soft: #DDF3F0;
  --idle: #8A8F98;
  --kind-trigger: #6B4FBB; --kind-edge: #1F6FB2; --kind-pure: #4B5563; --kind-link: #0F7B6C; --kind-external: #8A5A2B;
  --note-1: #FFF4C2; --note-2: #E6F4D7; --note-3: #DCEBFA; --note-4: #F4E1F2; --note-5: #FBE3D3; --note-6: #ECEAE4;
  --scrim: rgba(20,22,25,.40);
  --danger-ink: #FFFFFF;
  --tooltip-bg: var(--ink);
  /* 1.4 elevation, light */
  --e-1: 0 1px 2px rgba(30,33,38,.08);
  --e-2: 0 4px 12px rgba(30,33,38,.12);
  --e-3: 0 12px 32px rgba(30,33,38,.18);

  /* 1.2 typography */
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --t-display: 600 24px/32px var(--font-sans);
  --t-h1: 600 20px/28px var(--font-sans);
  --t-h2: 600 16px/24px var(--font-sans);
  --t-h3: 600 14px/20px var(--font-sans);
  --t-body: 400 14px/20px var(--font-sans);
  --t-label: 500 13px/18px var(--font-sans);
  --t-small: 400 12px/16px var(--font-sans);
  --t-caps: 600 11px/14px var(--font-sans);
  --t-mono: 400 13px/20px var(--font-mono);
  --t-mono-small: 400 12px/16px var(--font-mono);

  /* 1.3 spacing, sizes, radius */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --h-sm: 28px; --h-md: 32px; --h-lg: 40px;
  --r-1: 4px; --r-2: 8px; --r-round: 50%;

  /* 1.5 motion */
  --m-fast: 80ms ease-out;
  --m-base: 120ms ease-out;
  --m-slow: 200ms cubic-bezier(.2,.8,.2,1);
  --m-canvas: 160ms ease-in-out;

  /* 1.6 layers */
  --z-canvas: 0; --z-canvas-overlay: 10; --z-shell: 20; --z-panel: 30; --z-popover: 40; --z-dialog: 50; --z-toast: 60;

  /* 1.8 shell sizes */
  --sidebar-w: 232px; --sidebar-w-collapsed: 56px; --topbar-h: 48px; --content-max: 1280px;
}

/* 1.1 colour and 1.4 elevation, dark: follows the system unless Account > Theme overrides it */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #15171A; --surface: #1D2024; --surface-2: #262A2F; --surface-3: #30343A;
    --grid: #2B2F35; --grid-major: #353A41;
    --ink: #E8E6E1; --ink-2: #A3A8B0; --ink-3: #80868F;
    --line: #3A3F46; --line-strong: #5A6068;
    --accent: #3CC4AE; --accent-hover: #5AD3BF; --accent-soft: #173A35; --accent-ink: #0B1F1C; --focus: #3CC4AE;
    --ok: #6FCF73; --ok-soft: #1C3320; --warn: #F2B24C; --warn-soft: #3A2C14;
    --fail: #FF8A80; --fail-soft: #3D1D1B; --info: #7DB8EB; --info-soft: #1B2B3B;
    --sz: #C3A6F2; --sz-soft: #2A2140; --app: #6FD3C8; --app-soft: #16302D;
    --idle: #6D737C;
    --kind-trigger: #A993F0; --kind-edge: #7DB8EB; --kind-pure: #9AA3AF; --kind-link: #3CC4AE; --kind-external: #D9A56F;
    --note-1: #3B3620; --note-2: #26331F; --note-3: #1F2B38; --note-4: #35243A; --note-5: #3A2A20; --note-6: #2C2B28;
    --scrim: rgba(0,0,0,.55);
    --danger-ink: #1F0B0A;
    --tooltip-bg: #E8E6E1;
    --e-1: 0 0 0 1px #2E3238;
    --e-2: 0 0 0 1px #3A3F46, 0 6px 16px rgba(0,0,0,.4);
    --e-3: 0 0 0 1px #3A3F46, 0 16px 40px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #15171A; --surface: #1D2024; --surface-2: #262A2F; --surface-3: #30343A;
  --grid: #2B2F35; --grid-major: #353A41;
  --ink: #E8E6E1; --ink-2: #A3A8B0; --ink-3: #80868F;
  --line: #3A3F46; --line-strong: #5A6068;
  --accent: #3CC4AE; --accent-hover: #5AD3BF; --accent-soft: #173A35; --accent-ink: #0B1F1C; --focus: #3CC4AE;
  --ok: #6FCF73; --ok-soft: #1C3320; --warn: #F2B24C; --warn-soft: #3A2C14;
  --fail: #FF8A80; --fail-soft: #3D1D1B; --info: #7DB8EB; --info-soft: #1B2B3B;
    --sz: #C3A6F2; --sz-soft: #2A2140; --app: #6FD3C8; --app-soft: #16302D;
  --idle: #6D737C;
  --kind-trigger: #A993F0; --kind-edge: #7DB8EB; --kind-pure: #9AA3AF; --kind-link: #3CC4AE; --kind-external: #D9A56F;
  --note-1: #3B3620; --note-2: #26331F; --note-3: #1F2B38; --note-4: #35243A; --note-5: #3A2A20; --note-6: #2C2B28;
  --scrim: rgba(0,0,0,.55);
  --danger-ink: #1F0B0A;
  --tooltip-bg: #E8E6E1;
  --e-1: 0 0 0 1px #2E3238;
  --e-2: 0 0 0 1px #3A3F46, 0 6px 16px rgba(0,0,0,.4);
  --e-3: 0 0 0 1px #3A3F46, 0 16px 40px rgba(0,0,0,.5);
}

/* 1.5: reduced motion: transitions off, fades 40 ms */
@media (prefers-reduced-motion: reduce) {
  :root { --m-fast: 0ms linear; --m-base: 0ms linear; --m-slow: 0ms linear; --m-canvas: 0ms linear; }
}