/* Camaguayos design system override — local/prod-safe static theme
   Source: /camaguayos/camaguayos-design-system/project/colors_and_type.css */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Serif:wght@400;500;600&display=swap");

:root {
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
  --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;

  --bg-0: #3a4250;
  --bg-1: #424a59;
  --surface-1: #4a5261;
  --surface-2: #525b6b;
  --surface-press: #353d4a;
  --border: #5c6473;
  --border-strong: #7c8595;
  --fg-1: #eef1f6;
  --fg-2: #bcc5d1;
  --fg-3: #8a93a2;
  --fg-on-accent: #ffffff;
  --accent: #6f9fd9;
  --accent-hover: #87b1e3;
  --accent-press: #5a8bc7;
  --accent-soft: rgba(111,159,217,.15);
  --accent-ring: rgba(111,159,217,.35);
  --success: #6cb87f;
  --success-soft: rgba(108,184,127,.14);
  --warning: #d4a647;
  --warning-soft: rgba(212,166,71,.14);
  --danger: #d6685e;
  --danger-soft: rgba(214,104,94,.12);
  --info: #7ba9c8;
  --info-soft: rgba(123,169,200,.14);
  --code-bg: #1f242e;
  --code-fg: #dde2ec;
  --code-comment: #7a8597;
  --code-string: #9fcfb3;
  --code-keyword: #9bbedc;
  --code-number: #dcb47f;
  --code-punct: #a5b3c3;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 72px;
  --space-11: 96px;
  --shadow-1: 0 1px 0 rgba(255,255,255,.035) inset, 0 1px 2px rgba(8,12,18,.32);
  --shadow-2: 0 12px 28px rgba(8,12,18,.42);
  --shadow-focus: 0 0 0 3px var(--accent-ring);
  --ease-out: cubic-bezier(.2,.6,.2,1);
  --dur-fast: 120ms;
  --dur-base: 160ms;

  /* Compatibility with the existing static tools. */
  --bg: var(--bg-0) !important;
  --steel: var(--bg-0) !important;
  --steel-2: var(--surface-1) !important;
  --steel-3: var(--surface-2) !important;
  --rubber: var(--code-bg) !important;
  --panel: var(--surface-1) !important;
  --panel-2: var(--surface-2) !important;
  --panel2: var(--surface-2) !important;
  --paper: var(--surface-1) !important;
  --paper-strong: var(--surface-2) !important;
  --text: var(--fg-1) !important;
  --ink: var(--fg-1) !important;
  --muted: var(--fg-2) !important;
  --line: var(--border) !important;
  --line-strong: var(--border-strong) !important;
  --a: var(--accent) !important;
  --b: var(--accent) !important;
  --c: var(--accent) !important;
  --sky: var(--accent) !important;
  --sand: var(--accent) !important;
  --sage: var(--success) !important;
  --peach: var(--danger) !important;
  --lavender: var(--info) !important;
  --good: var(--success) !important;
  --bad: var(--danger) !important;
  --warn: var(--warning) !important;
  --tool-yellow: var(--accent) !important;
  --tool-yellow-2: var(--accent-press) !important;
  --tool-red: var(--danger) !important;
  --tool-green: var(--success) !important;
  --tool-blue: var(--accent) !important;
  --radius: var(--radius-lg) !important;
  --shadow: var(--shadow-1) !important;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg-0); }
body {
  color: var(--fg-1) !important;
  font-family: var(--font-sans) !important;
  background:
    linear-gradient(rgba(238,241,246,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,241,246,.035) 1px, transparent 1px),
    linear-gradient(180deg, var(--bg-0), var(--bg-1)) !important;
  background-size: 32px 32px, 32px 32px, auto !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--fg-1); text-decoration: underline; }
.wrap { width: min(var(--container-site, 1200px), 100%) !important; }
.top, header {
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.top::before, header::before, .top::after, header::after { box-shadow: none !important; }
.top::before, header::before { background: var(--accent) !important; opacity: .9 !important; }
.top::after, header::after { opacity: .18 !important; background: var(--border) !important; }

.brand { font-family: var(--font-sans) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; color: var(--fg-1) !important; }
.logo, .icon, .card-icon {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border) !important;
  background: var(--surface-2) !important;
  color: var(--fg-1) !important;
  box-shadow: var(--shadow-1) !important;
  font-family: var(--font-mono) !important;
}
.logo { width: 38px !important; height: 34px !important; }

h1, #title, #pageTitle {
  color: var(--fg-1) !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  text-shadow: none !important;
}
h2, h3 { color: var(--fg-1) !important; font-family: var(--font-sans) !important; letter-spacing: -0.01em !important; text-shadow: none !important; }
.lead, .subtitle, .eyebrow, .status, .source-box, footer, p, label, .muted, .badge { color: var(--fg-2) !important; }
.eyebrow, small, .badge, .port, .stat span, .metric span { font-family: var(--font-mono) !important; letter-spacing: .08em !important; text-transform: uppercase; }
.gradient { color: var(--fg-1) !important; }
h1::after { background: var(--accent) !important; height: 4px !important; border-radius: var(--radius-pill) !important; box-shadow: none !important; }
.dot { background: var(--accent) !important; box-shadow: 0 0 0 6px var(--accent-soft) !important; border-radius: var(--radius-sm) !important; transform: none !important; }
.dot::after { display: none !important; }

.card, article.card, .pane, .panel, .machine, .stat, .feature, .note, .source-box, .hero-card, .result, .metric, .table, .detail, .timeline, .output, .tool-tile {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-1) !important;
  backdrop-filter: none !important;
}
.card::before, article.card::before, .machine::before, .stat::before, .feature::before, .note::before, .pane::before, .panel::before { opacity: 0 !important; }
.card::after, article.card::after, .machine::after { opacity: 0 !important; }
.card:hover, article.card:hover, .tool-tile:hover {
  transform: none !important;
  background: var(--surface-2) !important;
  border-color: var(--border-strong) !important;
}
.pane-head, .head, .table h3, .detail h3 {
  background: var(--surface-2) !important;
  border-bottom: 1px solid var(--border) !important;
}

button, .btn, .nav a, input, select, textarea, .search, .filter, .flag, .home-link, .port, .langbar, .selection-chip {
  font-family: var(--font-sans) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
button, .btn, .nav a, .filter, .flag, .home-link, .port {
  background: var(--surface-1) !important;
  color: var(--fg-1) !important;
  font-weight: 600 !important;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out) !important;
}
button:hover, .btn:hover, .nav a:hover, .filter:hover, .flag:hover, .home-link:hover {
  transform: none !important;
  background: var(--surface-2) !important;
  border-color: var(--border-strong) !important;
  text-decoration: none !important;
}
button.primary, .btn.primary, .nav .primary, .filter.active, button.active, .active-tab, .langbar button.active, .port {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--fg-on-accent) !important;
}
button:active, .btn:active { background: var(--surface-press) !important; transform: translateY(1px) !important; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none !important;
  box-shadow: var(--shadow-focus) !important;
  border-color: var(--border-strong) !important;
}
input, select, textarea, .search {
  background: var(--code-bg) !important;
  color: var(--code-fg) !important;
  font: inherit;
}
textarea, code, pre, .viewer, .output, .row, .status-strip, .t-mono, .key, .string, .number, .boolean, .null, .punct, .meta {
  font-family: var(--font-mono) !important;
}
textarea, .viewer, .output, pre, code, .timeline { background: var(--code-bg) !important; color: var(--code-fg) !important; }
.key { color: var(--code-keyword) !important; }
.string { color: var(--code-string) !important; }
.number { color: var(--code-number) !important; }
.boolean { color: var(--info) !important; }
.null, .status.err { color: var(--danger) !important; }
.status.ok { color: var(--success) !important; }
mark, .match { background: var(--warning-soft) !important; color: var(--fg-1) !important; }

.langbar { padding: 4px !important; background: var(--surface-1) !important; border-radius: var(--radius-md) !important; }
.langbar button { border: 0 !important; background: transparent !important; color: var(--fg-2) !important; border-radius: var(--radius-sm) !important; }
.langbar button.active { background: var(--accent) !important; color: var(--fg-on-accent) !important; }
.home-link { background: var(--surface-1) !important; color: var(--fg-1) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}