/* ========================================================
   Aminobots — Brand System (design tokens + base classes)
   v1.0 · 2026-05-28
   The cascade rises. Lowercase prevails. Cream is warm.
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ============ COLOR · primary teal cascade ============ */
  --brand-teal-50:  #E7F1ED;
  --brand-teal-100: #C7DFD3;
  --brand-teal-200: #92BFA9;
  --brand-teal-300: #5DA286;
  --brand-teal-400: #3D8B6D;
  --brand-teal-500: #0F6E56;   /* primary · the mark itself */
  --brand-teal-600: #0B5A47;
  --brand-teal-700: #084A3A;
  --brand-teal-900: #04342C;   /* deep · text on cream */

  /* ============ COLOR · warm neutrals ============ */
  --warm-cream:  #FAF8F3;       /* page background */
  --warm-50:     #F2EFE8;
  --warm-100:    #E6E2D8;
  --warm-200:    #C9C5B7;
  --warm-300:    #A3A096;
  --warm-500:    #5A6470;       /* secondary text */
  --warm-700:    #3D4350;
  --warm-900:    #1F242C;

  /* ============ COLOR · states (warm-aligned) ============ */
  --state-success-bg: rgba(15, 110, 86, 0.10);
  --state-success-fg: #0B5A47;
  --state-warn-bg:    #F4E9D2;
  --state-warn-fg:    #7A5611;
  --state-danger-bg:  #F4D9D3;
  --state-danger-fg:  #842D1F;
  --state-info-bg:    #D9E2EB;
  --state-info-fg:    #1F4470;

  /* ============ COLOR · category accents (tag-only use) ============ */
  --cat-lending:    #0F6E56;
  --cat-support:    #1D4E89;
  --cat-industrial: #9F6A1C;
  --cat-clinical:   #993556;
  --cat-knowledge:  #3C3489;
  --cat-documents:  #0F4A33;

  /* ============ TYPOGRAPHY ============ */
  --font-sans: 'Inter', 'Calibri', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Monaco, monospace;

  --type-display: 36px;
  --type-h1: 28px;
  --type-h2: 22px;
  --type-h3: 18px;
  --type-h4: 15px;
  --type-body: 14px;
  --type-small: 12px;
  --type-tiny: 11px;
  --type-eyebrow: 10px;

  --tracking-display: -0.035em;
  --tracking-h1: -0.025em;
  --tracking-h2: -0.018em;
  --tracking-h3: -0.012em;
  --tracking-body: 0;
  --tracking-eyebrow: 0.20em;
  --tracking-eyebrow-wide: 0.22em;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  /* ============ SPACING (4px base) ============ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ============ RADIUS ============ */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  /* ============ BORDERS ============ */
  --border-thin: 1px solid rgba(15, 110, 86, 0.12);
  --border-medium: 1px solid rgba(15, 110, 86, 0.2);
  --border-strong: 1px solid var(--brand-teal-500);
  --border-cream: 1px solid var(--warm-100);

  /* ============ MOTION ============ */
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================================
   BASE RESET + TYPOGRAPHY
   ======================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--brand-teal-900);
  background: var(--warm-cream);
  font-size: var(--type-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--brand-teal-500); text-decoration: none; }
a:hover { color: var(--brand-teal-700); }

/* Type utility classes */
.b-display { font-size: var(--type-display); font-weight: 500; letter-spacing: var(--tracking-display); line-height: var(--leading-tight); text-transform: lowercase; }
.b-h1 { font-size: var(--type-h1); font-weight: 500; letter-spacing: var(--tracking-h1); line-height: var(--leading-snug); text-transform: lowercase; }
.b-h2 { font-size: var(--type-h2); font-weight: 500; letter-spacing: var(--tracking-h2); line-height: var(--leading-snug); text-transform: lowercase; }
.b-h3 { font-size: var(--type-h3); font-weight: 500; letter-spacing: var(--tracking-h3); line-height: var(--leading-snug); text-transform: lowercase; }
.b-eyebrow { font-size: var(--type-eyebrow); font-weight: 500; letter-spacing: var(--tracking-eyebrow); color: var(--brand-teal-500); text-transform: uppercase; }
.b-mono { font-family: var(--font-mono); }
.b-secondary { color: var(--warm-500); }
.b-deep { color: var(--brand-teal-900); }

/* ========================================================
   THE CASCADE — brand motif applied as components
   ======================================================== */
.cascade {
  display: inline-block;
  position: relative;
  flex-shrink: 0;
}
.cascade svg { display: block; width: 100%; height: 100%; }

.cascade-section-marker {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
}
.cascade-section-marker .csm-mark { width: 32px; height: 32px; }
.cascade-section-marker .csm-num { font-size: var(--type-tiny); letter-spacing: var(--tracking-eyebrow); color: var(--brand-teal-500); font-weight: 500; text-transform: uppercase; display: block; }
.cascade-section-marker .csm-title { font-size: var(--type-h3); font-weight: 500; letter-spacing: var(--tracking-h3); color: var(--brand-teal-900); text-transform: lowercase; margin-top: 2px; }
.cascade-section-marker .csm-right { margin-left: auto; font-size: var(--type-tiny); color: var(--warm-500); letter-spacing: 0.04em; }

.cascade-watermark {
  position: absolute;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}

/* ========================================================
   LAYOUT
   ======================================================== */
.b-app {
  display: grid;
  grid-template-rows: 60px 1fr auto;
  min-height: 100vh;
}
.b-shell { display: grid; grid-template-columns: 1fr; }
.b-shell.with-sidebar { grid-template-columns: 240px 1fr; }
.b-content { padding: var(--space-6) var(--space-8); max-width: 1240px; width: 100%; position: relative; }

/* ========================================================
   TOP NAV
   ======================================================== */
.b-topnav {
  background: var(--warm-cream);
  border-bottom: var(--border-thin);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-8);
  height: 60px;
  position: sticky; top: 0; z-index: 10;
}
.b-brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: inherit; }
.b-brand-mark { width: 30px; height: 30px; }
.b-brand-text { display: flex; flex-direction: column; line-height: 1; }
.b-brand-name { font-size: 16px; font-weight: 500; letter-spacing: -0.5px; color: var(--brand-teal-900); text-transform: lowercase; }
.b-brand-tag { font-size: 11px; letter-spacing: 0.22em; color: var(--brand-teal-500); font-weight: 500; text-transform: uppercase; margin-top: 3px; }
.b-brand-pill { font-size: 11px; letter-spacing: 0.22em; background: rgba(15, 110, 86, 0.1); color: var(--brand-teal-500); padding: 3px 8px; border-radius: 3px; font-weight: 500; text-transform: uppercase; margin-left: var(--space-3); }
.b-nav-links { display: flex; gap: var(--space-6); font-size: var(--type-small); }
.b-nav-links a { color: var(--warm-500); padding: 6px 0; border-bottom: 2px solid transparent; text-transform: lowercase; }
.b-nav-links a.active { color: var(--brand-teal-900); border-bottom-color: var(--brand-teal-500); }
.b-nav-links a:hover { color: var(--brand-teal-900); text-decoration: none; }
.b-nav-right { display: flex; align-items: center; gap: var(--space-3); }

/* ========================================================
   SIDEBAR
   ======================================================== */
.b-sidebar {
  background: var(--warm-cream);
  border-right: var(--border-thin);
  padding: var(--space-5) var(--space-3);
  position: sticky; top: 60px;
  height: calc(100vh - 60px); overflow-y: auto;
}
.b-sb-group { font-size: 11px; letter-spacing: var(--tracking-eyebrow); color: var(--warm-500); margin: var(--space-4) var(--space-3) var(--space-2); text-transform: uppercase; font-weight: 500; }
.b-sb-group:first-child { margin-top: 0; }
.b-sb-item {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  color: var(--warm-500); text-decoration: none;
  font-size: 12.5px; text-transform: lowercase;
  border: 0; background: transparent; cursor: pointer; width: 100%; text-align: left;
}
.b-sb-item:hover { background: var(--warm-50); color: var(--brand-teal-900); text-decoration: none; }
.b-sb-item.active { background: rgba(15, 110, 86, 0.08); color: var(--brand-teal-700); font-weight: 500; }
.b-sb-item i { font-size: 14px; }
.b-sb-item .id-tag { font-size: 11px; color: var(--warm-300); margin-left: auto; font-family: var(--font-mono); }
.b-sb-item.active .id-tag { color: var(--brand-teal-500); }

/* ========================================================
   PAGE HEADER
   ======================================================== */
.b-page-head { margin-bottom: var(--space-6); position: relative; }
.b-page-eyebrow { font-size: var(--type-tiny); letter-spacing: var(--tracking-eyebrow); color: var(--brand-teal-500); text-transform: uppercase; font-weight: 500; margin-bottom: var(--space-1); }
.b-page-h1 { font-size: var(--type-display); font-weight: 500; letter-spacing: var(--tracking-display); line-height: var(--leading-tight); color: var(--brand-teal-900); margin: 0 0 var(--space-2); text-transform: lowercase; max-width: 720px; }
.b-page-h1 em { font-style: normal; color: var(--brand-teal-500); }
.b-page-sub { font-size: var(--type-body); color: var(--warm-500); line-height: var(--leading-normal); max-width: 600px; }

/* ========================================================
   CARDS
   ======================================================== */
.b-card {
  background: #FFFFFF;
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  position: relative;
  transition: border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard);
}
.b-card:hover { border-color: rgba(15, 110, 86, 0.2); }
.b-card-pad-sm { padding: var(--space-3) var(--space-4); }
.b-card-h { font-size: var(--type-h4); font-weight: 500; letter-spacing: -0.2px; margin: 0 0 var(--space-1); text-transform: lowercase; }
.b-card-sub { font-size: var(--type-small); color: var(--warm-500); margin: 0 0 var(--space-4); }
.b-card-warm { background: var(--warm-cream); }

/* ========================================================
   BUTTONS
   ======================================================== */
.b-btn {
  font-family: inherit; font-size: var(--type-small);
  padding: 9px 16px; border-radius: var(--radius-md);
  border: 1px solid rgba(15, 110, 86, 0.25);
  background: #FFFFFF; color: var(--brand-teal-900);
  cursor: pointer; font-weight: 500; letter-spacing: 0.01em;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  text-transform: lowercase;
  transition: background var(--duration-fast) var(--easing-standard);
}
.b-btn:hover { background: var(--warm-50); }
.b-btn-primary { background: var(--brand-teal-900); color: var(--warm-cream); border-color: var(--brand-teal-900); }
.b-btn-primary:hover { background: var(--brand-teal-500); border-color: var(--brand-teal-500); }
.b-btn-ghost { background: transparent; border-color: transparent; }
.b-btn-sm { font-size: var(--type-tiny); padding: 6px 11px; }
.b-btn-xs { font-size: 10.5px; padding: 4px 9px; }
.b-btn-block { width: 100%; }
.b-btn i { font-size: 14px; }

/* ========================================================
   INPUTS
   ======================================================== */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="password"], select, textarea {
  font-family: inherit; font-size: var(--type-small);
  padding: 9px 12px;
  border: 1px solid rgba(15, 110, 86, 0.25); border-radius: var(--radius-md);
  background: #FFFFFF; color: var(--brand-teal-900);
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--brand-teal-500);
  box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.12);
}
textarea { resize: vertical; min-height: 64px; line-height: var(--leading-normal); }
label.b-field-label { display: block; font-size: var(--type-tiny); color: var(--warm-500); margin-bottom: 5px; letter-spacing: 0.04em; }

/* ========================================================
   PILLS / BADGES
   ======================================================== */
.b-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--type-tiny); padding: 4px 11px; border-radius: var(--radius-pill);
  font-weight: 500; letter-spacing: 0.02em;
  background: var(--warm-50); color: var(--warm-500);
}
.b-pill-success { background: var(--state-success-bg); color: var(--state-success-fg); }
.b-pill-warn { background: var(--state-warn-bg); color: var(--state-warn-fg); }
.b-pill-danger { background: var(--state-danger-bg); color: var(--state-danger-fg); }
.b-pill-info { background: var(--state-info-bg); color: var(--state-info-fg); }
.b-pill-brand { background: rgba(15, 110, 86, 0.1); color: var(--brand-teal-700); }
.b-pill-tag {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  background: rgba(15, 110, 86, 0.06); color: var(--warm-500);
  padding: 3px 7px; border-radius: 3px; font-weight: 500;
}

.b-status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.b-dot-live { background: var(--brand-teal-500); }
.b-dot-warn { background: var(--state-warn-fg); }
.b-dot-danger { background: var(--state-danger-fg); }
.b-dot-idle { background: var(--warm-300); }

.b-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-teal-500); display: inline-block; animation: b-pulse 1.4s infinite; }
@keyframes b-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

/* ========================================================
   METRIC CARDS
   ======================================================== */
.b-metric {
  background: var(--warm-cream);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.b-metric-label { font-size: var(--type-tiny); color: var(--warm-500); letter-spacing: 0.04em; }
.b-metric-value { font-size: 22px; font-weight: 500; letter-spacing: -0.4px; margin-top: 2px; }
.b-metric-card-white { background: #FFFFFF; border: var(--border-thin); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }

/* ========================================================
   TABLES
   ======================================================== */
table.b-tbl { width: 100%; border-collapse: collapse; font-size: var(--type-small); }
.b-tbl th, .b-tbl td { padding: var(--space-3); text-align: left; border-bottom: var(--border-thin); }
.b-tbl th { font-size: var(--type-eyebrow); color: var(--warm-500); font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.b-tbl tr:last-child td { border-bottom: 0; }

/* ========================================================
   GRID HELPERS
   ======================================================== */
.b-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.b-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.b-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.b-layout-2-1 { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-5); }
.b-layout-1-1 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.b-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.b-hstack { display: flex; align-items: center; gap: var(--space-2); }

/* ========================================================
   BANNER / ALERT
   ======================================================== */
.b-banner {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--type-small);
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.b-banner-info { background: rgba(15, 110, 86, 0.07); color: var(--brand-teal-700); }
.b-banner-warn { background: var(--state-warn-bg); color: var(--state-warn-fg); }
.b-banner-danger { background: var(--state-danger-bg); color: var(--state-danger-fg); }

/* ========================================================
   AVATARS
   ======================================================== */
.b-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(15, 110, 86, 0.1); color: var(--brand-teal-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--type-tiny); font-weight: 500;
}

/* ========================================================
   FOOTER
   ======================================================== */
.b-footer {
  padding: var(--space-4) var(--space-8);
  font-size: var(--type-tiny); color: var(--warm-500);
  background: var(--warm-cream);
  border-top: var(--border-thin);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--space-3);
}
.b-footer-badges { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.b-footer-badges span { display: inline-flex; align-items: center; gap: 4px; }
.b-footer strong { color: var(--brand-teal-900); font-weight: 500; }

/* ========================================================
   PRODUCT CARD — for catalog surfaces
   ======================================================== */
.b-prod-card {
  background: #FFFFFF;
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.b-prod-top { padding: var(--space-4); display: flex; gap: var(--space-3); align-items: flex-start; }
.b-prod-mark { width: 44px; height: 44px; flex-shrink: 0; }
.b-prod-titles { flex: 1; min-width: 0; }
.b-prod-vert { font-size: 11px; letter-spacing: 0.18em; font-weight: 500; text-transform: uppercase; }
.b-prod-sku { font-size: var(--type-h4); font-weight: 500; color: var(--brand-teal-900); letter-spacing: -0.3px; line-height: 1.2; margin: var(--space-1) 0 2px; text-transform: lowercase; }
.b-prod-codename { font-size: var(--type-tiny); color: var(--warm-500); font-style: italic; }
.b-prod-status { font-size: 11px; letter-spacing: 0.14em; color: var(--brand-teal-500); background: rgba(15, 110, 86, 0.08); padding: 2px 7px; border-radius: 3px; font-weight: 500; text-transform: uppercase; display: inline-block; margin-top: var(--space-2); }
.b-prod-status.beta { color: var(--state-warn-fg); background: var(--state-warn-bg); }
.b-prod-simple { font-size: var(--type-small); color: var(--brand-teal-700); padding: 0 var(--space-4) var(--space-2); margin: 0; font-weight: 500; line-height: var(--leading-snug); }
.b-prod-desc { font-size: 12.5px; color: var(--warm-500); line-height: var(--leading-normal); padding: 0 var(--space-4) var(--space-3); margin: 0; }
.b-prod-tags { display: flex; gap: 5px; flex-wrap: wrap; padding: 0 var(--space-4) var(--space-3); }
.b-prod-lighthouse { padding: var(--space-3) var(--space-4); background: var(--warm-cream); border-top: var(--border-thin); font-size: var(--type-tiny); color: var(--warm-500); display: flex; align-items: center; gap: 8px; }
.b-prod-lighthouse strong { color: var(--brand-teal-900); font-weight: 500; }
.b-prod-lighthouse::before { content: ""; width: 6px; height: 6px; background: var(--brand-teal-500); border-radius: 50%; flex-shrink: 0; }
.b-prod-foot { display: flex; border-top: var(--border-thin); }
.b-prod-foot button { flex: 1; font-family: inherit; font-size: var(--type-small); padding: 13px 0; background: transparent; border: 0; cursor: pointer; color: var(--brand-teal-900); font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-transform: lowercase; }
.b-prod-foot button.primary { background: var(--brand-teal-900); color: var(--warm-cream); }
.b-prod-foot button.primary:hover { background: var(--brand-teal-500); }
.b-prod-foot button + button { border-left: var(--border-thin); }

/* Vertical accents for category eyebrows */
.b-vert-lend    { color: var(--cat-lending); }
.b-vert-supp    { color: var(--cat-support); }
.b-vert-ind     { color: var(--cat-industrial); }
.b-vert-clin    { color: var(--cat-clinical); }
.b-vert-know    { color: var(--cat-knowledge); }
.b-vert-doc     { color: var(--cat-documents); }

/* ========================================================
   RESPONSIVE
   ======================================================== */
@media (max-width: 800px) {
  .b-shell.with-sidebar { grid-template-columns: 1fr; }
  .b-sidebar { display: none; }
  .b-grid-3, .b-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-layout-2-1, .b-layout-1-1 { grid-template-columns: 1fr; }
  .b-nav-links { display: none; }
  .b-page-h1 { font-size: 26px; }
}

/* ── skip nav + hamburger ── */
.skip-nav{position:absolute;top:-100px;left:16px;background:var(--brand-teal-900);color:var(--warm-cream);padding:8px 16px;border-radius:0 0 6px 6px;font-size:13px;font-weight:500;text-decoration:none;transition:top .15s;z-index:200;}
.skip-nav:focus{top:0;}
.site-nav-hamburger{display:none;background:transparent;border:none;cursor:pointer;color:var(--brand-teal-900);font-size:22px;padding:6px 4px;line-height:1;align-items:center;}
@media(max-width:880px){
  .site-nav-hamburger{display:flex;}
  .site-nav-links.nav-open{display:flex!important;flex-direction:column;position:fixed;top:60px;left:0;right:0;background:var(--warm-cream);border-bottom:1px solid rgba(15,110,86,0.15);padding:12px 24px 20px;gap:0;z-index:99;box-shadow:0 4px 20px rgba(4,52,44,0.08);}
  .site-nav-links.nav-open a{padding:13px 0;border-bottom:1px solid rgba(15,110,86,0.08);font-size:15px;color:var(--brand-teal-900);}
  .site-nav-links.nav-open a:last-child{border-bottom:0;}
}