/*! StiffStruct, (c) 2026 Mohammad Asad. All rights reserved. Proprietary: copying, mirroring or reusing this code is not permitted without written permission (see terms.html#intellectual-property). build 20261018-2017 */
/* StiffStruct design tokens — shared by the app (app.css) and the website pages (site.css).
 * <html data-theme="light|dark"> is the RESOLVED theme; <html data-contrast="high|normal"> is the user's
 * text-contrast preference (Settings › High-contrast text; default high).
 */

:root {
  color-scheme: light;

  /* surfaces & text */
  --bg: #f4f5f8;
  --bg-elev: #ffffff;
  --bg-sunken: #eceef3;
  --bg-hover: rgba(17, 24, 39, 0.055);
  --fg: #111827;
  --fg-muted: #5b6474;
  --fg-subtle: #8b93a3;
  --border: #e1e4ea;
  --border-strong: #cbd0d9;

  /* brand & status */
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-fg: #ffffff;
  --accent-soft: #eef0ff;
  --accent-text: #4338ca;
  --danger: #dc2626;
  --danger-soft: #fdecec;
  --warning: #c26a05;
  --warning-soft: #fdf3e1;
  --success: #15803d;
  --success-soft: #e7f6ec;
  --info: #0369a1;
  --info-soft: #e6f3fb;

  /* shape & depth */
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.07);
  --shadow-2: 0 18px 40px -12px rgba(16, 24, 40, 0.28), 0 6px 14px -6px rgba(16, 24, 40, 0.14);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);

  /* motion — the built-in CSS easings are too weak; use these for anything entering, exiting or moving */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* type */
  --font-ui: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* structural drawing palette */
  --member: #334155;
  --node: #0f172a;
  --grid: #e3e6ec;
  --selection: #f59e0b;
  --load: #dc2626;
  /* one colour per load when several loads are drawn (load 1 keeps --load) */
  --load-2: #2563eb;
  --load-3: #059669;
  --load-4: #d97706;
  --load-5: #9333ea;
  --load-6: #db2777;
  --support: #475569;
  --reaction: #0d9488;
  --deflected: #16a34a;
  --diag-N: #7c3aed;
  --diag-V: #0284c7;
  --diag-M: #e11d48;
  --diag-T: #b45309;
  --diag-d: #16a34a;
  --tension: #2563eb;
  --compression: #ea580c;
  --zero-force: #94a3b8;

  /* layout metrics (panel sizes are overridden inline from localStorage) */
  --header-h: 52px;
  --modebar-h: 44px;
  --status-h: 26px;
  --sh-left-w: 330px;
  --sh-right-w: 300px;
  --sh-bottom-h: 260px;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0c1018;
  --bg-elev: #141a25;
  --bg-sunken: #0f141d;
  --bg-hover: rgba(226, 232, 240, 0.07);
  --fg: #e6e9ef;
  --fg-muted: #9aa4b6;
  --fg-subtle: #6c778a;
  --border: #263041;
  --border-strong: #35415a;

  --accent: #818cf8;
  --accent-hover: #a5b4fc;
  --accent-fg: #0c1018;
  --accent-soft: rgba(129, 140, 248, 0.15);
  --accent-text: #a5b4fc;
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.14);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, 0.13);
  --success: #4ade80;
  --success-soft: rgba(74, 222, 128, 0.13);
  --info: #38bdf8;
  --info-soft: rgba(56, 189, 248, 0.13);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 20px 44px -12px rgba(0, 0, 0, 0.65), 0 6px 16px -6px rgba(0, 0, 0, 0.5);

  --member: #cbd5e1;
  --node: #e2e8f0;
  --grid: #1b2331;
  --selection: #fbbf24;
  --load: #f87171;
  --load-2: #60a5fa;
  --load-3: #34d399;
  --load-4: #fbbf24;
  --load-5: #c084fc;
  --load-6: #f472b6;
  --support: #94a3b8;
  --reaction: #2dd4bf;
  --deflected: #4ade80;
  --diag-N: #a78bfa;
  --diag-V: #38bdf8;
  --diag-M: #fb7185;
  --diag-T: #fbbf24;
  --diag-d: #4ade80;
  --tension: #60a5fa;
  --compression: #fb923c;
  --zero-force: #64748b;
}

/* High-contrast text: no grey body text — black on light, pure white on dark. */
:root[data-contrast="high"] {
  --fg: #000000;
  --fg-muted: #1f2937;
  --fg-subtle: #374151;
  --border-strong: #9aa3b2;
  --member: #0f172a;
  --support: #1e293b;
}
:root[data-theme="dark"][data-contrast="high"] {
  --fg: #ffffff;
  --fg-muted: #f1f5f9;
  --fg-subtle: #d6dde8;
  --border-strong: #55627a;
  --member: #f1f5f9;
  --node: #ffffff;
  --support: #cbd5e1;
  --accent-text: #c7d2fe;
}