/*
 * Whiteboard design tokens (v1).
 *
 * Single source for colour, type, spacing, radii, shadows, z-layers and
 * pane sizes. Light is the default. Dark applies when the system prefers it
 * and the user has not forced light, or when data-theme="dark" is set on
 * <html>. data-theme="light" forces light.
 *
 * Diagram tokens (--dg-*, --fc-*) are the names the scene refers to; the
 * numbers that go with them are in diagram-metrics.md.
 */

@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ---------- Type ---------- */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-diagram: var(--font-ui);
  --font-diagram-mono: var(--font-mono);
  --font-feature-ui: "calt" 0, "cv11", "ss01"; /* Inter: no arrow ligatures (labels show code literally), open digits */

  /* size / line-height pairs */
  --text-2xs: 10px; --lh-2xs: 14px;
  --text-xs: 11px;  --lh-xs: 16px;
  --text-sm: 12px;  --lh-sm: 16px;
  --text-md: 13px;  --lh-md: 20px;  /* base UI size */
  --text-lg: 14px;  --lh-lg: 20px;
  --text-xl: 16px;  --lh-xl: 24px;
  --text-2xl: 20px; --lh-2xl: 28px;
  --text-3xl: 24px; --lh-3xl: 32px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --code-size: 13px;
  --code-line: 20px;

  /* ---------- Spacing (4px grid, 2px half-step) ---------- */
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- Radii ---------- */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 999px;

  /* ---------- Control and pane sizes ---------- */
  --control-h: 28px;        /* buttons, inputs, segmented controls */
  --control-h-sm: 24px;     /* toolbar buttons inside panes */
  --control-h-lg: 36px;     /* app screens (sign-in forms) */
  --topbar-h: 44px;
  --pane-header-h: 32px;
  --problems-h: 28px;       /* collapsed problems strip */
  --problems-max-h: 168px;  /* expanded list, scrolls beyond */
  --rail-w: 36px;           /* collapsed code pane */
  --code-pane-min: 320px;
  --code-pane-default: 30vw;
  --code-pane-max: 640px;   /* wide screens stop growing here */
  --details-w: clamp(320px, 22vw, 400px);
  --details-dock-min-viewport: 1600px; /* docked at or above, overlay below */
  --splitter-hit: 8px;
  --minimap-w: 192px;
  --minimap-h: 120px;

  /* ---------- Z layers ---------- */
  --z-canvas: 0;
  --z-canvas-overlay: 10;  /* canvas toolbar, minimap, zoom, banners */
  --z-pane: 20;            /* code pane, docked details panel */
  --z-panel-overlay: 25;   /* details panel when overlaying the canvas */
  --z-topbar: 30;
  --z-popover: 40;         /* tooltips anchored to canvas items, autocomplete */
  --z-menu: 50;            /* dropdown menus */
  --z-toast: 60;
  --z-modal: 70;
  --z-tooltip: 80;

  /* ---------- Motion ---------- */
  --dur-fast: 80ms;
  --dur-base: 140ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* ---------- Colour: light ---------- */
  --bg-chrome: #ffffff;        /* top bar, panes, panels */
  --bg-subtle: #f5f6f8;        /* pane headers, strips, table header rows */
  --bg-canvas: #f7f8fa;
  --canvas-grid: #d5d9e0;      /* 1px dots every 20px at 100% zoom */
  --bg-inset: #eef0f3;         /* segmented track, code chips, skeletons */
  --bg-elevated: #ffffff;      /* menus, popovers, dialogs */
  --bg-hover: rgba(15, 23, 42, 0.05);
  --bg-active: rgba(15, 23, 42, 0.09);
  --bg-selected: #e8effc;
  --bg-backdrop: rgba(15, 18, 24, 0.32);

  --border: #e2e5ea;
  --border-strong: #c9ced6;
  --border-input: #878e99;

  --fg: #1a1d23;
  --fg-muted: #535b67;         /* 7.0:1 on white */
  --fg-subtle: #69717e;        /* 4.8:1 on white, 4.6:1 on --bg-subtle */
  --fg-disabled: #a3a9b3;
  --fg-on-accent: #ffffff;
  --fg-on-danger: #ffffff;

  --accent: #2563d9;
  --accent-hover: #1d53bb;
  --accent-active: #17479f;
  --accent-fg: #1f5bcc;        /* links and accent text, 5.9:1 on white */
  --accent-subtle: #e8effc;
  --accent-border: #a8c1f0;
  --focus-ring: #2563d9;

  --danger: #c9312f;
  --danger-hover: #ad2826;
  --danger-fg: #b02a28;
  --danger-subtle: #fdeceb;
  --danger-border: #f1b5b3;
  --warning: #a86400;
  --warning-fg: #8f5500;
  --warning-subtle: #fff4e0;
  --warning-border: #f0cd8e;
  --success: #1c8048;
  --success-fg: #176d3d;
  --success-subtle: #e5f5eb;
  --success-border: #a7dbbb;

  /* presence colours (avatars, lock holder, remote cursors) */
  --swatch-edge: rgba(0, 0, 0, 0.15);   /* inset edge on colour swatches */
  --fg-on-presence: #ffffff;   /* initials on avatars and remote labels */
  --presence-1: #2563d9;
  --presence-2: #b4378a;
  --presence-3: #12806f;
  --presence-4: #b35c00;
  --presence-5: #6e4ad6;

  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-2: 0 2px 4px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.12);
  --shadow-3: 0 4px 8px rgba(15, 23, 42, 0.08), 0 16px 40px rgba(15, 23, 42, 0.18);

  /* ---------- Code editor (CodeMirror theme) ---------- */
  --code-bg: #ffffff;
  --code-fg: #1a1d23;
  --code-gutter-bg: #ffffff;
  --code-gutter-fg: #6f7784;
  --code-gutter-fg-active: #535b67;
  --code-line-active: #f4f6f9;
  --code-selection: #dbe7fb;
  --code-selection-match: #e4ecfa;
  --code-cursor: #1a1d23;
  --code-bracket-match: rgba(37, 99, 217, 0.18);
  --code-readonly-bg: #fafbfc;
  --code-indent-guide: #eceef2;

  --syn-keyword: #8a35b8;      /* Table, Ref, Enum, flowchart, subgraph, end */
  --syn-name: #1a1d23;         /* identifiers */
  --syn-definition: #1c5fc9;   /* name being defined: table, enum, node id */
  --syn-type: #0a6b65;         /* column types */
  --syn-setting: #b0306c;      /* pk, not null, note:, delete: */
  --syn-string: #9a4a0c;
  --syn-number: #1b5fb8;
  --syn-comment: #5e6674;
  --syn-operator: #535b67;     /* > < - <> --> -.-> */
  --syn-punct: #5e6674;
  --syn-color: #1a1d23;        /* #hex literal, drawn with a swatch */

  /* ---------- Diagram: shared ---------- */
  --dg-text: #1a1d23;
  --dg-text-muted: #5a626e;   /* 4.5:1 on the header + count chip */
  --dg-text-dark: #111418;     /* auto-contrast choice on light fills */
  --dg-text-light: #ffffff;    /* auto-contrast choice on dark fills */
  --dg-selection: #2563d9;
  --dg-hover: #535b67;
  --dg-label-bg: var(--bg-canvas);
  --dg-error: #c9312f;
  --dg-error-badge-fg: #ffffff;
  --dg-error-fill: rgba(201, 49, 47, 0.06);
  --dg-dim-opacity: 0.25;

  /* ERD tables */
  --dg-table-bg: #ffffff;
  --dg-table-border: #878e99;    /* 3.1:1 on canvas: the card edge */
  --dg-table-divider: #c3c9d2;   /* header/body rule inside the card */
  --dg-table-header-bg: #e9ecf1;
  --dg-table-header-fg: #1a1d23;
  --dg-table-schema-fg: #5a626e;
  --dg-col-name: #1a1d23;
  --dg-col-type: #5a626e;
  --dg-pk: #b07a00;
  --dg-fk: #69717e;
  --dg-badge-fg: #535b67;
  --dg-badge-border: #c9ced6;
  --dg-row-hover: rgba(37, 99, 217, 0.06);
  --dg-row-selected: rgba(37, 99, 217, 0.13);
  --dg-row-linked: rgba(37, 99, 217, 0.07);
  --dg-note-mark: #9a6d00;
  --dg-count-bg: rgba(15, 23, 42, 0.07);

  /* ERD refs */
  --dg-ref: #7f8897;           /* 3.3:1 on canvas */
  --dg-ref-hover: #4d5563;
  --dg-ref-selected: #2563d9;

  /* Lineage deps */
  --dg-dep: #78818f;
  --dg-dep-hover: #4d5563;
  --dg-trace-up: #6b3fd1;      /* upstream of the trace origin */
  --dg-trace-down: #0d7f72;    /* downstream of the trace origin */
  --dg-trace-origin: #2563d9;
  --dg-cycle: #b56d00;
  --dg-ref-overlay-opacity: 0.35;

  /* groups and sticky notes */
  --dg-group: #646d7c;         /* default TableGroup / subgraph colour */
  --dg-group-fill-opacity: 0.06;
  --dg-group-stroke-opacity: 0.55;
  --dg-sticky-bg: #fff3b5;
  --dg-sticky-border: #e3cd6b;
  --dg-sticky-fg: #3b330e;
  --dg-sticky-title: #6b5c13;

  /* ---------- Diagram: flowchart ---------- */
  --fc-node-bg: #ffffff;
  --fc-node-border: #7f8897;
  --fc-node-fg: #1a1d23;
  --fc-edge: #6a7382;
  --fc-label-fg: #3b414b;
  --fc-subgraph-bg: rgba(100, 116, 139, 0.07);
  --fc-subgraph-border: #c3c9d2;
  --fc-subgraph-title: #535b67;
}

/* ---------- Colour: dark ---------- */
/* The dark block is written twice (system preference and explicit override);
   keep them identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-chrome: #1b1d22;
    --bg-subtle: #202329;
    --bg-canvas: #131518;
    --canvas-grid: #2b2f37;
    --bg-inset: #15171b;
    --bg-elevated: #23262d;
    --bg-hover: rgba(255, 255, 255, 0.06);
    --bg-active: rgba(255, 255, 255, 0.1);
    --bg-selected: #1d2b45;
    --bg-backdrop: rgba(0, 0, 0, 0.55);
    --border: #2d3139;
    --border-strong: #3e444f;
    --border-input: #6b7380;
    --fg: #e7e9ed;
    --fg-muted: #a9b0bb;
    --fg-subtle: #8c939e;
    --fg-disabled: #5d646f;
    --fg-on-accent: #ffffff;
    --fg-on-danger: #ffffff;
    --accent: #2f6bdb;
    --accent-hover: #2860c9;
    --accent-active: #2257b8;
    --accent-fg: #8ab0ff;
    --accent-subtle: #1c2a45;
    --accent-border: #33507f;
    --focus-ring: #6c9dff;
    --danger: #c63b36;
    --danger-hover: #b3332f;
    --danger-fg: #ff8a85;
    --danger-subtle: #3a1f20;
    --danger-border: #6b3433;
    --warning: #e0a33a;
    --warning-fg: #f0bb5e;
    --warning-subtle: #36290f;
    --warning-border: #66501f;
    --success: #42b874;
    --success-fg: #6fd39a;
    --success-subtle: #15301f;
    --success-border: #2b5a3d;
    --swatch-edge: rgba(255, 255, 255, 0.22);
    --fg-on-presence: #111418;
    --presence-1: #6c9dff;
    --presence-2: #e57ac0;
    --presence-3: #3cc2ae;
    --presence-4: #f0a050;
    --presence-5: #a68bff;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.45), 0 18px 44px rgba(0, 0, 0, 0.6);
    --code-bg: #17191d;
    --code-fg: #e1e4e8;
    --code-gutter-bg: #17191d;
    --code-gutter-fg: #80878f;
    --code-gutter-fg-active: #a9b0bb;
    --code-line-active: #1e2126;
    --code-selection: #1c3050;
    --code-selection-match: #233147;
    --code-cursor: #e7e9ed;
    --code-bracket-match: rgba(108, 157, 255, 0.25);
    --code-readonly-bg: #15171a;
    --code-indent-guide: #24272d;
    --syn-keyword: #c792ea;
    --syn-name: #e1e4e8;
    --syn-definition: #82b1ff;
    --syn-type: #5fd0c2;
    --syn-setting: #f08bb6;
    --syn-string: #e9a86d;
    --syn-number: #79b8ff;
    --syn-comment: #959ca7;
    --syn-operator: #a9b0bb;
    --syn-punct: #959ca7;
    --syn-color: #e1e4e8;
    --dg-text: #e7e9ed;
    --dg-text-muted: #a9b0bb;
    --dg-selection: #6c9dff;
    --dg-hover: #b9c0ca;
    --dg-error: #f0605d;
    --dg-error-badge-fg: #111418;
    --dg-error-fill: rgba(240, 96, 93, 0.08);
    --dg-dim-opacity: 0.28;
    --dg-table-bg: #1e2127;
    --dg-table-border: #5f6773;
    --dg-table-divider: #3b414b;
    --dg-table-header-bg: #2a2e36;
    --dg-table-header-fg: #e7e9ed;
    --dg-table-schema-fg: #9aa1ac;
    --dg-col-name: #e1e4e8;
    --dg-col-type: #a3aab5;
    --dg-pk: #e2b340;
    --dg-fk: #949ba6;
    --dg-badge-fg: #a9b0bb;
    --dg-badge-border: #464c57;
    --dg-row-hover: rgba(108, 157, 255, 0.08);
    --dg-row-selected: rgba(108, 157, 255, 0.18);
    --dg-row-linked: rgba(108, 157, 255, 0.09);
    --dg-note-mark: #e2b340;
    --dg-count-bg: rgba(255, 255, 255, 0.08);
    --dg-ref: #6b7481;
    --dg-ref-hover: #aab1bc;
    --dg-ref-selected: #6c9dff;
    --dg-dep: #6e7785;
    --dg-dep-hover: #aab1bc;
    --dg-trace-up: #a687ff;
    --dg-trace-down: #3cc8b4;
    --dg-trace-origin: #6c9dff;
    --dg-cycle: #e0a33a;
    --dg-ref-overlay-opacity: 0.4;
    --dg-group: #8a93a1;
    --dg-group-fill-opacity: 0.1;
    --dg-group-stroke-opacity: 0.6;
    --dg-sticky-bg: #3a3420;
    --dg-sticky-border: #5f5530;
    --dg-sticky-fg: #efe6c2;
    --dg-sticky-title: #d6c27a;
    --fc-node-bg: #1e2127;
    --fc-node-border: #727b89;
    --fc-node-fg: #e7e9ed;
    --fc-edge: #7d8694;
    --fc-label-fg: #c9ced6;
    --fc-subgraph-bg: rgba(148, 163, 184, 0.07);
    --fc-subgraph-border: #3b414b;
    --fc-subgraph-title: #a9b0bb;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-chrome: #1b1d22;
  --bg-subtle: #202329;
  --bg-canvas: #131518;
  --canvas-grid: #2b2f37;
  --bg-inset: #15171b;
  --bg-elevated: #23262d;
  --bg-hover: rgba(255, 255, 255, 0.06);
  --bg-active: rgba(255, 255, 255, 0.1);
  --bg-selected: #1d2b45;
  --bg-backdrop: rgba(0, 0, 0, 0.55);
  --border: #2d3139;
  --border-strong: #3e444f;
  --border-input: #6b7380;
  --fg: #e7e9ed;
  --fg-muted: #a9b0bb;
  --fg-subtle: #8c939e;
  --fg-disabled: #5d646f;
  --fg-on-accent: #ffffff;
  --fg-on-danger: #ffffff;
  --accent: #2f6bdb;
  --accent-hover: #2860c9;
  --accent-active: #2257b8;
  --accent-fg: #8ab0ff;
  --accent-subtle: #1c2a45;
  --accent-border: #33507f;
  --focus-ring: #6c9dff;
  --danger: #c63b36;
  --danger-hover: #b3332f;
  --danger-fg: #ff8a85;
  --danger-subtle: #3a1f20;
  --danger-border: #6b3433;
  --warning: #e0a33a;
  --warning-fg: #f0bb5e;
  --warning-subtle: #36290f;
  --warning-border: #66501f;
  --success: #42b874;
  --success-fg: #6fd39a;
  --success-subtle: #15301f;
  --success-border: #2b5a3d;
  --swatch-edge: rgba(255, 255, 255, 0.22);
  --fg-on-presence: #111418;
  --presence-1: #6c9dff;
  --presence-2: #e57ac0;
  --presence-3: #3cc2ae;
  --presence-4: #f0a050;
  --presence-5: #a68bff;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.45), 0 18px 44px rgba(0, 0, 0, 0.6);
  --code-bg: #17191d;
  --code-fg: #e1e4e8;
  --code-gutter-bg: #17191d;
  --code-gutter-fg: #80878f;
  --code-gutter-fg-active: #a9b0bb;
  --code-line-active: #1e2126;
  --code-selection: #1c3050;
  --code-selection-match: #233147;
  --code-cursor: #e7e9ed;
  --code-bracket-match: rgba(108, 157, 255, 0.25);
  --code-readonly-bg: #15171a;
  --code-indent-guide: #24272d;
  --syn-keyword: #c792ea;
  --syn-name: #e1e4e8;
  --syn-definition: #82b1ff;
  --syn-type: #5fd0c2;
  --syn-setting: #f08bb6;
  --syn-string: #e9a86d;
  --syn-number: #79b8ff;
  --syn-comment: #959ca7;
  --syn-operator: #a9b0bb;
  --syn-punct: #959ca7;
  --syn-color: #e1e4e8;
  --dg-text: #e7e9ed;
  --dg-text-muted: #a9b0bb;
  --dg-selection: #6c9dff;
  --dg-hover: #b9c0ca;
  --dg-error: #f0605d;
  --dg-error-badge-fg: #111418;
  --dg-error-fill: rgba(240, 96, 93, 0.08);
  --dg-dim-opacity: 0.28;
  --dg-table-bg: #1e2127;
  --dg-table-border: #5f6773;
  --dg-table-divider: #3b414b;
  --dg-table-header-bg: #2a2e36;
  --dg-table-header-fg: #e7e9ed;
  --dg-table-schema-fg: #9aa1ac;
  --dg-col-name: #e1e4e8;
  --dg-col-type: #a3aab5;
  --dg-pk: #e2b340;
  --dg-fk: #949ba6;
  --dg-badge-fg: #a9b0bb;
  --dg-badge-border: #464c57;
  --dg-row-hover: rgba(108, 157, 255, 0.08);
  --dg-row-selected: rgba(108, 157, 255, 0.18);
  --dg-row-linked: rgba(108, 157, 255, 0.09);
  --dg-note-mark: #e2b340;
  --dg-count-bg: rgba(255, 255, 255, 0.08);
  --dg-ref: #6b7481;
  --dg-ref-hover: #aab1bc;
  --dg-ref-selected: #6c9dff;
  --dg-dep: #6e7785;
  --dg-dep-hover: #aab1bc;
  --dg-trace-up: #a687ff;
  --dg-trace-down: #3cc8b4;
  --dg-trace-origin: #6c9dff;
  --dg-cycle: #e0a33a;
  --dg-ref-overlay-opacity: 0.4;
  --dg-group: #8a93a1;
  --dg-group-fill-opacity: 0.1;
  --dg-group-stroke-opacity: 0.6;
  --dg-sticky-bg: #3a3420;
  --dg-sticky-border: #5f5530;
  --dg-sticky-fg: #efe6c2;
  --dg-sticky-title: #d6c27a;
  --fc-node-bg: #1e2127;
  --fc-node-border: #727b89;
  --fc-node-fg: #e7e9ed;
  --fc-edge: #7d8694;
  --fc-label-fg: #c9ced6;
  --fc-subgraph-bg: rgba(148, 163, 184, 0.07);
  --fc-subgraph-border: #3b414b;
  --fc-subgraph-title: #a9b0bb;
}