/* ==================================================================
   Watson — public site design system
   Bootstrap 5 base + custom research-tool theme.
   Design language drawn from the /styleguide working material
   (dark, focused, magenta accent) adapted to Bootstrap.
   ================================================================== */

:root {
  --wt-accent:        #b5155b;
  --wt-accent-2:      #6d28d9;
  --wt-accent-rgb:    181, 21, 91;
  --wt-radius:        14px;
  --wt-radius-sm:     10px;
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---- Colour modes ------------------------------------------------ */
[data-bs-theme="dark"] {
  --bs-body-bg:        #0e0d17;
  --bs-body-color:     #c9c7d6;
  --wt-surface:        #17162279;
  --wt-surface-solid:  #191826;
  --wt-border:         #2a2740;
  --wt-heading:        #ffffff;
  --wt-muted:          #8b88a3;
}
[data-bs-theme="light"] {
  --bs-body-bg:        #f7f7fb;
  --bs-body-color:     #3f3d56;
  --wt-surface:        #ffffff;
  --wt-surface-solid:  #ffffff;
  --wt-border:         #e7e6f0;
  --wt-heading:        #16151f;
  --wt-muted:          #6d6b85;
}

body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

[data-bs-theme="dark"] body {
  background-image:
    radial-gradient(60rem 60rem at 85% -10%, rgba(109,40,217,.16), transparent 60%),
    radial-gradient(50rem 50rem at 5% 0%, rgba(var(--wt-accent-rgb),.14), transparent 55%);
  background-attachment: fixed;
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4 { color: var(--wt-heading); font-weight: 700; letter-spacing: -.01em; }
a { color: var(--bs-body-color); text-decoration: none; }
a:hover { color: var(--wt-accent); }
.text-muted, .text-secondary { color: var(--wt-muted) !important; }

/* ---- Accent utilities ------------------------------------------- */
.text-accent { color: var(--wt-accent) !important; }
.bg-accent   { background: var(--wt-accent) !important; color:#fff !important; }
.accent-grad {
  background: linear-gradient(100deg, var(--wt-accent), var(--wt-accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.btn-accent {
  --bs-btn-bg: var(--wt-accent); --bs-btn-border-color: var(--wt-accent);
  --bs-btn-hover-bg:#9c1050; --bs-btn-hover-border-color:#9c1050;
  --bs-btn-active-bg:#870d45; --bs-btn-color:#fff; --bs-btn-hover-color:#fff;
  --bs-btn-focus-shadow-rgb: var(--wt-accent-rgb);
  color:#fff; font-weight:600;
}
.btn-outline-accent {
  --bs-btn-color: var(--wt-accent); --bs-btn-border-color: rgba(var(--wt-accent-rgb),.5);
  --bs-btn-hover-bg: var(--wt-accent); --bs-btn-hover-border-color: var(--wt-accent);
  --bs-btn-hover-color:#fff; font-weight:600;
}

/* ---- Navbar ------------------------------------------------------ */
.wt-navbar {
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bs-body-bg) 82%, transparent);
  border-bottom: 1px solid var(--wt-border);
  position: sticky; top: 0; z-index: 1030;
}
.wt-brand { display:flex; align-items:center; gap:.55rem; font-weight:800; font-size:1.25rem; color:var(--wt-heading); letter-spacing:-.02em; }
.wt-brand:hover { color: var(--wt-heading); }
.wt-brand-mark {
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background: linear-gradient(135deg, var(--wt-accent), var(--wt-accent-2));
  color:#fff; font-weight:800; box-shadow: 0 6px 18px rgba(var(--wt-accent-rgb),.4);
}
.wt-navbar .nav-link { color: var(--bs-body-color); font-weight:500; padding:.5rem .85rem; border-radius:8px; }
.wt-navbar .nav-link:hover, .wt-navbar .nav-link.active { color: var(--wt-heading); background: color-mix(in srgb, var(--wt-accent) 12%, transparent); }

/* ---- Cards / surfaces ------------------------------------------- */
.wt-card {
  background: var(--wt-surface);
  border: 1px solid var(--wt-border);
  border-radius: var(--wt-radius);
  backdrop-filter: blur(6px);
}
.wt-card.solid { background: var(--wt-surface-solid); backdrop-filter:none; }
.wt-card.hover { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.wt-card.hover:hover { transform: translateY(-4px); border-color: rgba(var(--wt-accent-rgb),.55); box-shadow: 0 18px 40px rgba(0,0,0,.25); }
.wt-icon {
  width:52px; height:52px; border-radius:13px; display:grid; place-items:center; font-size:1.5rem;
  background: color-mix(in srgb, var(--wt-accent) 14%, transparent); color: var(--wt-accent);
}

/* ---- Hero -------------------------------------------------------- */
.wt-hero { padding: 5.5rem 0 4rem; }
.wt-eyebrow {
  display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:600;
  letter-spacing:.02em; padding:.4rem .85rem; border-radius:999px;
  border:1px solid var(--wt-border); color:var(--wt-muted);
  background: var(--wt-surface);
}
.wt-hero h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); line-height:1.05; }
.wt-hero .lead { font-size:1.18rem; color:var(--bs-body-color); max-width:42rem; }
.wt-hero-visual {
  border-radius: var(--wt-radius); border:1px solid var(--wt-border);
  background: var(--wt-surface-solid); overflow:hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}

/* ---- Section helpers -------------------------------------------- */
.wt-section { padding: 4.5rem 0; }
.wt-section-tight { padding: 3rem 0; }
.wt-section-head { max-width: 44rem; margin: 0 auto 3rem; text-align:center; }
.wt-section-head h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }

/* ---- Stats ------------------------------------------------------- */
.wt-stat { text-align:center; }
.wt-stat .num { font-size: clamp(2rem,4vw,2.8rem); font-weight:800; color:var(--wt-heading); }
.wt-stat .lbl { color: var(--wt-muted); font-size:.95rem; }

/* ---- Page headers ------------------------------------------------ */
.wt-page-head { padding: 3.5rem 0 2rem; border-bottom:1px solid var(--wt-border); margin-bottom:2.5rem; }
.wt-page-head h1 { font-size: clamp(2rem,4vw,2.9rem); }

/* ---- Badges / chips --------------------------------------------- */
.wt-chip {
  display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem; font-weight:600;
  padding:.28rem .6rem; border-radius:999px; border:1px solid var(--wt-border);
  color:var(--wt-muted); background: var(--wt-surface);
}
.wt-chip.accent { color: var(--wt-accent); border-color: rgba(var(--wt-accent-rgb),.4); background: color-mix(in srgb, var(--wt-accent) 10%, transparent); }
a.wt-chip:hover { border-color: rgba(var(--wt-accent-rgb),.5); color: var(--wt-accent); }

/* Library collection sidebar */
.wt-coll-link { color: var(--wt-muted); font-size:.9rem; }
.wt-coll-link:hover { background: var(--wt-surface); color: var(--wt-text); }
.wt-coll-link.active { background: color-mix(in srgb, var(--wt-accent) 14%, transparent); color: var(--wt-accent); font-weight:600; }

/* Glossary term links inside notes (R-GLO-3) */
.wt-gloss { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(var(--wt-accent-rgb),.7); cursor: help; }
.wt-gloss:hover { color: var(--wt-accent); border-bottom-style: solid; }

/* ---- Forms ------------------------------------------------------- */
.form-control, .form-select {
  background: var(--wt-surface-solid); border-color: var(--wt-border); color: var(--bs-body-color);
}
.form-control:focus, .form-select:focus {
  background: var(--wt-surface-solid); color: var(--bs-body-color);
  border-color: var(--wt-accent); box-shadow: 0 0 0 .2rem rgba(var(--wt-accent-rgb),.2);
}
.form-control::placeholder { color: var(--wt-muted); }

/* ---- Auth screens ------------------------------------------------ */
.wt-auth-wrap { min-height: 100vh; display:grid; place-items:center; padding:2rem 1rem; }
.wt-auth-card { width:100%; max-width: 30rem; }

/* ---- Lists / rows ------------------------------------------------ */
.wt-row-list .wt-row { border:1px solid var(--wt-border); border-radius:var(--wt-radius-sm); background:var(--wt-surface); padding:1rem 1.25rem; margin-bottom:.75rem; transition: border-color .15s; }
.wt-row-list .wt-row:hover { border-color: rgba(var(--wt-accent-rgb),.5); }

/* ---- Docs layout ------------------------------------------------- */
.wt-doc-nav .list-group-item { background:transparent; border:0; color:var(--bs-body-color); padding:.4rem .5rem; border-radius:8px; }
.wt-doc-nav .list-group-item.active { background: color-mix(in srgb, var(--wt-accent) 14%, transparent); color: var(--wt-heading); }
.wt-prose { max-width: 48rem; line-height:1.75; }
.wt-prose h3 { margin-top:2rem; }
.wt-prose img { max-width:100%; border-radius:var(--wt-radius-sm); }
.wt-prose ul { padding-left:1.2rem; }

/* ---- Footer ------------------------------------------------------ */
.wt-footer { border-top:1px solid var(--wt-border); background: var(--wt-surface-solid); padding:3.5rem 0 2rem; margin-top:4rem; }
.wt-footer h6 { color:var(--wt-heading); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1rem; }
.wt-footer a { color: var(--wt-muted); display:block; padding:.28rem 0; }
.wt-footer a:hover { color: var(--wt-accent); }

/* ---- Theme toggle ------------------------------------------------ */
.wt-theme-toggle { border:1px solid var(--wt-border); background:var(--wt-surface); color:var(--bs-body-color); width:40px; height:40px; border-radius:10px; display:grid; place-items:center; }
.wt-theme-toggle:hover { color: var(--wt-accent); border-color: rgba(var(--wt-accent-rgb),.5); }
[data-bs-theme="dark"] .wt-only-light { display:none; }
[data-bs-theme="light"] .wt-only-dark { display:none; }

/* ---- Misc -------------------------------------------------------- */
.wt-avatar { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--wt-accent),var(--wt-accent-2)); }
.wt-avatar.lg { width:88px; height:88px; font-size:2rem; }
.wt-divider { height:1px; background:var(--wt-border); border:0; }
.object-cover { object-fit: cover; }
.min-w-0 { min-width: 0; }