/* Insilijo Science — commercial surface */
:root {
  --ink:        #0b1220;
  --ink-soft:   #3a4355;
  --ink-muted:  #6b7280;
  --paper:      #ffffff;
  --panel:      #f7f8fa;
  --rule:       #e3e7ef;
  --brand:      #0c4a6e;
  --brand-alt:  #0891b2;
  --signal:     #b45309;
  --signal-hi:  #92400e;
  --ok:         #15803d;
  --warn:       #b91c1c;
  --field-bg:   #ffffff;
  --table-hover:#fafbfd;
  --shadow-md:  rgba(12, 74, 110, 0.05);
  --mono:       ui-monospace, SFMono-Regular, "JetBrains Mono", "IBM Plex Mono", monospace;
  --serif:      "Source Serif 4", "Source Serif Pro", Georgia, serif;
}

html[data-theme="dark"] {
  --ink:        #e6ebf5;
  --ink-soft:   #b8c0cd;
  --ink-muted:  #8a93a3;
  --paper:      #0b1220;
  --panel:      #131a26;
  --rule:       #2a3142;
  --brand:      #38bdf8;
  --brand-alt:  #67e8f9;
  --signal:     #fb923c;
  --signal-hi:  #f97316;
  --ok:         #4ade80;
  --warn:       #f87171;
  --field-bg:   #1a2230;
  --table-hover:#1a2230;
  --shadow-md:  rgba(0, 0, 0, 0.4);
}

html { scroll-behavior: smooth; }
body { color: var(--ink); background: var(--paper); font-feature-settings: "ss01", "cv05"; transition: background-color 200ms ease, color 200ms ease; }

/* ──────────────────────────────────────────────────────────────
   Utility-class overrides for dark mode.
   Templates use Tailwind inline-bracket hex classes for brand colors;
   under [data-theme="dark"] we re-route those classes to CSS variables
   so the design tokens swap together.
───────────────────────────────────────────────────────────────── */
html[data-theme="dark"] body.bg-white,
html[data-theme="dark"] .bg-white { background-color: var(--paper) !important; }

/* Section / panel backgrounds (templates use #f7f8fa or #f3f4f8) */
html[data-theme="dark"] .bg-\[\#f7f8fa\],
html[data-theme="dark"] .bg-\[\#f3f4f8\] { background-color: var(--panel) !important; }

/* Body / muted text colors */
html[data-theme="dark"] .text-\[\#0b1220\] { color: var(--ink) !important; }
html[data-theme="dark"] .text-\[\#3a4355\] { color: var(--ink-soft) !important; }
html[data-theme="dark"] .text-\[\#6b7280\] { color: var(--ink-muted) !important; }
html[data-theme="dark"] .text-\[\#0891b2\] { color: var(--brand-alt) !important; }
html[data-theme="dark"] .text-\[\#0c4a6e\] { color: var(--brand) !important; }

/* Border / divider hex codes used in inline style and class */
html[data-theme="dark"] .border-\[\#e0e5f2\],
html[data-theme="dark"] .border-\[\#e6e9f0\],
html[data-theme="dark"] .border-\[\#d6dbe4\] { border-color: var(--rule) !important; }

/* Inline accent colors used in copy (success/warn/info pills) */
html[data-theme="dark"] .text-\[\#15803d\] { color: var(--ok) !important; }
html[data-theme="dark"] .text-\[\#b45309\] { color: var(--signal) !important; }
html[data-theme="dark"] .text-\[\#0891b2\] { color: var(--brand-alt) !important; }
html[data-theme="dark"] .text-\[\#e74c3c\] { color: #fca5a5 !important; }
html[data-theme="dark"] .text-\[\#f39c12\] { color: #fbbf24 !important; }
html[data-theme="dark"] .text-\[\#2980b9\] { color: var(--brand) !important; }

/* Brand square mark on the navbar — keep teal but lighten in dark */
html[data-theme="dark"] .bg-\[\#0c4a6e\] { background-color: var(--brand) !important; }

/* Header bottom border in nav */
html[data-theme="dark"] header { border-color: var(--rule); }
html[data-theme="dark"] footer { border-color: var(--rule); }
html[data-theme="dark"] footer .text-\[\#d6dbe4\] { color: var(--rule) !important; }

/* Underline decoration on active nav link */
html[data-theme="dark"] .decoration-\[\#0c4a6e\] { text-decoration-color: var(--brand) !important; }

.h-display {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
}
.h-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}

.btn-primary {
  background: var(--signal);
  color: #fff;
  padding: 0.6rem 1.1rem;
  border-radius: 0.375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 120ms ease;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.btn-primary:hover { background: var(--signal-hi); }
html[data-theme="dark"] .btn-primary { color: #0b1220; }
.btn-secondary {
  background: transparent;
  color: var(--ink);
  padding: 0.6rem 1.1rem;
  border-radius: 0.375rem;
  border: 1px solid var(--rule);
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.btn-secondary:hover { border-color: var(--ink); }

a.link { color: var(--brand-alt); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a.link:hover { color: var(--brand); }

.rule { border-color: var(--rule); }
.panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
}

.chip {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink-soft);
}

table.compare { width: 100%; border-collapse: collapse; }
table.compare th, table.compare td {
  border-bottom: 1px solid var(--rule);
  padding: 0.6rem 0.75rem;
  font-size: 14px;
  text-align: left;
  vertical-align: top;
}
table.compare th { font-weight: 600; color: var(--ink); }
table.compare td.yes { color: var(--ok);   font-weight: 500; }
table.compare td.no  { color: var(--ink-muted); }
table.compare td.partial { color: var(--signal); font-weight: 500; }
table.compare tbody tr:hover { background: var(--table-hover); }

figure.methods { margin: 1.5rem 0; }
figure.methods figcaption {
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-top: 0.5rem;
  line-height: 1.5;
}

.prose-tight p { line-height: 1.6; }
.prose-tight p + p { margin-top: 0.85rem; }

.form-field label { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  margin-top: 0.25rem;
  border: 1px solid var(--rule);
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 14px;
  background: var(--field-bg);
  color: var(--ink);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(12, 74, 110, 0.12);
}
.form-field ul.errorlist { list-style: none; padding: 0; margin: 0.25rem 0 0; font-size: 12px; color: var(--warn); }