/* =============================================================================
   Intake /app — design tokens (authored fresh; no inheritance from /admin css).
   Minimalist: white / greys / black accent + sparing colour splashes.
   RULE: every component references these tokens; no hard-coded values elsewhere.
   Theme = swap this one file.
   ============================================================================= */

@font-face {
  font-family: "League Spartan";
  src: url("/assets/font/LeagueSpartan-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "League Spartan";
  src: url("/assets/font/LeagueSpartan-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "League Spartan";
  src: url("/assets/font/LeagueSpartan-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "League Spartan";
  src: url("/assets/font/LeagueSpartan-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "League Spartan";
  src: url("/assets/font/LeagueSpartan-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "League Spartan";
  src: url("/assets/font/LeagueSpartan-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "League Spartan";
  src: url("/assets/font/LeagueSpartan-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "League Spartan";
  src: url("/assets/font/LeagueSpartan-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "League Spartan";
  src: url("/assets/font/LeagueSpartan-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

:root {
  /* ---- Surface & ink ---- */
  --c-bg: #ffffff;
  --c-bg-sunken: #fafafa;
  --c-surface: #ffffff;
  --c-surface-2: #f6f6f6;
  --c-surface-hover: #f1f1f1;
  --c-ink: #0a0a0a;
  --c-ink-2: #4a4a4a;
  --c-ink-3: #8a8a8a;
  --c-ink-inv: #ffffff;

  /* ---- Lines ---- */
  --c-line: #e6e6e6;
  --c-line-2: #d4d4d4;
  --c-line-strong: #0a0a0a;

  /* ---- Accent (black) ---- */
  --c-accent: #0a0a0a;
  --c-accent-hover: #262626;
  --c-accent-soft: rgba(10, 10, 10, 0.06);
  --c-scrim: rgba(10, 10, 10, 0.32); /* modal backdrop */

  /* ---- Colour splashes (used sparingly) ---- */
  --c-splash-blue: #2f6df6;
  --c-splash-amber: #e0820a;
  --c-splash-green: #1aa06d;
  --c-splash-red: #e0463a;
  --c-splash-violet: #7a5af5;

  /* ---- Run-state accents ---- */
  --run-idle: var(--c-ink-3);
  --run-running: var(--c-splash-blue);
  --run-error: var(--c-splash-red);
  --run-done: var(--c-splash-green);

  /* ---- Translucent fills (derived from splashes) ---- */
  --c-error-soft: rgba(224, 70, 58, 0.06);
  --c-error-line: rgba(224, 70, 58, 0.2);
  --flash-from: rgba(47, 109, 246, 0.5);
  --flash-to: rgba(47, 109, 246, 0);

  /* ---- Port kinds (edge / port marker colours) ---- */
  --port-records: var(--c-splash-amber);
  --port-cards: var(--c-splash-green);

  /* ---- Typography ---- */
  --font-sans: "League Spartan", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  --fs-2xs: 0.75rem; /* 12px */
  --fs-xs: 0.8125rem; /* 13px */
  --fs-sm: 0.875rem; /* 14px */
  --fs-md: 1rem; /* 17px */
  --fs-lg: 1.25rem; /* 20px */
  --fs-xl: 1.625rem; /* 26px */
  --fs-2xl: 2.25rem; /* 36px */
  --fs-3xl: 3.375rem; /* 54px */

  --fw-normal: 300;
  --fw-medium: 300;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.2;
  --lh-base: 1.5;

  /* ---- Spacing scale ---- */
  --sp-0: 0;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* ---- Borders & radii ---- */
  --bw: 1px;
  --bw-2: 2px;
  --border: var(--bw) solid var(--c-line);
  --border-thick: var(--bw-2) solid var(--c-line);
  --border-2: var(--bw) solid var(--c-line-2);
  --border-strong: var(--bw) solid var(--c-line-strong);

  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 18px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 2px rgba(10, 10, 10, 0.05);
  --shadow-sm: 0 2px 6px rgba(10, 10, 10, 0.07);
  --shadow-md: 0 6px 20px rgba(10, 10, 10, 0.10);
  --shadow-lg: 0 12px 40px rgba(10, 10, 10, 0.16);
  --ring: 0 0 0 2px var(--c-surface), 0 0 0 4px var(--c-line-strong);

  /* ---- Transitions ---- */
  --t-fast: 0.1s ease;
  --t-base: 0.16s ease;
  --t-slow: 0.28s ease;
  --t-io-logo-enter: 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  --t-io-logo-exit: 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  /* Premium motion — a glidey ease-out used for panel/dock reveals so elements
   * settle into place rather than snapping. Pair with a slightly longer
   * duration than --t-slow for a refined, weighted feel. */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --t-reveal: 0.42s var(--ease-out-quint);

  /* ---- Layout ---- */
  --header-h: 48px;
  --gap-edge: 16px; /* gap from viewport edges for floating panels */

  /* Dock: full height x 2/3 width, gaps on all edges. */
  --dock-w: 66.6667vw;
  --dock-gap: var(--gap-edge);

  /* Assistant: 1/3 width x full height, left side, gaps incl. gap to dock. */
  --assistant-w: 33.3333vw;
  --assistant-gap: var(--gap-edge);
  --assistant-fab-size: 44px;
  --assistant-fab-inset: 20px;

  /* ---- Canvas / nodes ---- */
  --canvas-bg: #fbfbfb;
  --canvas-grid: #ededed;
  --canvas-grid-size: 24px;
  --zoom-min: 0.3;
  --zoom-max: 2;

  --node-w: 310px;
  --node-min-h: 92px;
  --node-radius: var(--r-2xl);
  --node-pad: var(--sp-3);
  --node-shadow: var(--shadow-sm);
  --node-shadow-hover: var(--shadow-md);

  --port-size: 12px;
  --port-hit: 22px;

  --edge-stroke: 1.75px;
  --edge-stroke-active: 2.5px;
  --edge-flow-dur: 1.1s;
  --edge-color: var(--c-line-2);

  /* ---- Z-index layers ---- */
  --z-canvas: 1;
  --z-edges: 2;
  --z-nodes: 3;
  --z-assistant: 60;
  --z-dock: 70;
  --z-header: 75;
  --z-overlay: 80;
  --z-menu: 90;
  --z-toast: 100;
}