/* ============================================================================
   cortex-docs.css — self-contained theme + shared components for the Cortex
   docs hub (/cortex/*).

   This file is self-contained. It does NOT @import conduir-theme.css. The
   tokens mirror the shipped Fifth9 light/dark palette, so the hub looks
   identical to the other public pages once the shared theme merges.

   Light is the default. Dark applies through :root[data-theme="dark"].
   A page toggles the theme with a small inline script that writes
   localStorage['conduir.theme'] and sets data-theme on <html>.

   Every hub page uses the SAME class names defined here:
     .cortex-nav  .cortex-nav__brand  .cortex-nav__links  .cortex-nav__cta
     .theme-toggle
     .cortex-container
     .cortex-hero  .eyebrow  .lede
     .cortex-cards  .cortex-card  .cortex-card__title  .cortex-card__body
       .cortex-card__caveat  .cortex-card__arrow
     .cortex-note  (note callout)
     .btn  .btn--ghost
     pre  code  (block + inline code)
     .muted  (secondary-text utility)
   ========================================================================== */

:root{
  color-scheme:light;

  /* surfaces */
  --bg:#f5f7fa;
  --card:#ffffff;
  --muted:#eef2f7;
  --border:#e3e8ef;

  /* text */
  --fg:#0f172a;
  --muted-fg:#475569;

  /* accent (Fifth9 coral — deepened in light so it clears WCAG AA as text on
     the near-white surfaces; the same coral runs bright in the dark block below) */
  --accent:#c53a24;
  --accent-hover:#a82f1c;
  --accent-fg:#ffffff;
  --accent-tint:rgba(255,127,108,.14);

  /* type + shape */
  --radius:14px;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;

  --nav-bg:rgba(255,255,255,.85);
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow-md:0 10px 30px -14px rgba(15,23,42,.18);
}

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

  --bg:#090e12;
  --card:#12171b;
  --muted:#161b20;
  --border:#2b2e32;

  --fg:#f3f1ee;
  --muted-fg:#bfc5ca;

  /* accent (Fifth9 coral in dark, matching the shipped aesthetic) */
  --accent:#ff7f6c;
  --accent-hover:#f75d59;
  --accent-fg:#060606;
  --accent-tint:rgba(255,127,108,.14);

  --nav-bg:rgba(9,14,18,.82);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 12px 34px -18px rgba(0,0,0,.55);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--accent-tint)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* ---- nav -------------------------------------------------------------- */
.cortex-nav{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:16px;
  padding:12px 24px;
  background:var(--nav-bg);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
}
.cortex-nav__brand{
  font-weight:700;font-size:16px;letter-spacing:-.2px;
  color:var(--fg);text-decoration:none;
}
.cortex-nav__brand:hover{text-decoration:none}
.cortex-nav__links{
  display:flex;align-items:center;gap:20px;
  margin-left:auto;flex-wrap:wrap;
  font-size:14.5px;
}
.cortex-nav__links a{
  color:var(--muted-fg);text-decoration:none;
  transition:color .15s;
}
.cortex-nav__links a:hover{color:var(--fg);text-decoration:none}
.cortex-nav__links a[aria-current="page"]{color:var(--fg);font-weight:600}
.cortex-nav__cta{
  background:var(--accent);color:var(--accent-fg)!important;
  padding:8px 14px;border-radius:9px;font-size:13.5px;font-weight:600;
  box-shadow:0 8px 20px -10px rgba(255,127,108,.55);
  transition:filter .15s;
}
.cortex-nav__cta:hover{filter:brightness(1.06);text-decoration:none}

.theme-toggle{
  flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:9px;
  border:1px solid var(--border);background:var(--card);color:var(--muted-fg);
  font-size:15px;line-height:1;cursor:pointer;
  transition:color .15s,border-color .15s;
}
.theme-toggle:hover{color:var(--accent);border-color:var(--accent)}

/* ---- layout ----------------------------------------------------------- */
.cortex-container{
  max-width:1060px;margin:0 auto;
  padding:40px 24px 80px;
}

h1{font-size:clamp(30px,4.4vw,44px);line-height:1.08;letter-spacing:-1px;font-weight:700}
h2{font-size:clamp(21px,2.6vw,27px);letter-spacing:-.5px;font-weight:700;margin:44px 0 0}
h3{font-size:17px;font-weight:600}
p{margin:14px 0 0;color:var(--fg)}
.muted{color:var(--muted-fg)}
.lede{color:var(--muted-fg);font-size:clamp(16.5px,2vw,19px);line-height:1.55;margin:18px 0 0;max-width:64ch}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--accent);
  background:var(--accent-tint);border:1px solid var(--border);
  padding:6px 12px;border-radius:100px;
}

.cortex-hero{margin-bottom:8px}

/* ---- buttons ---------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 22px;border-radius:12px;
  font-family:var(--sans);font-size:15.5px;font-weight:600;
  border:1px solid transparent;cursor:pointer;
  background:var(--accent);color:var(--accent-fg);
  box-shadow:0 14px 30px -12px rgba(255,127,108,.5);
  transition:filter .15s,border-color .15s,color .15s,background .15s;
}
.btn:hover{filter:brightness(1.07);text-decoration:none;color:var(--accent-fg)}
.btn--ghost{
  background:var(--card);border-color:var(--border);color:var(--fg);
  box-shadow:var(--shadow-sm);
}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent);filter:none}

/* ---- cards ------------------------------------------------------------ */
.cortex-cards{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:16px;margin-top:24px;
}
.cortex-card{
  display:block;
  border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;background:var(--card);color:var(--fg);
  box-shadow:var(--shadow-sm);text-decoration:none;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
a.cortex-card:hover{
  transform:translateY(-2px);box-shadow:var(--shadow-md);
  border-color:var(--accent);text-decoration:none;
}
.cortex-card__title{
  display:flex;align-items:center;gap:8px;
  font-size:17px;font-weight:600;color:var(--fg);
}
.cortex-card__arrow{margin-left:auto;color:var(--accent);font-weight:600}
.cortex-card__body{margin:9px 0 0;color:var(--muted-fg);font-size:14.5px;line-height:1.55}
.cortex-card__caveat{
  margin:13px 0 0;padding-top:12px;border-top:1px solid var(--border);
  font-size:13px;line-height:1.5;color:var(--muted-fg);
}
.cortex-card__caveat b{color:var(--fg);font-weight:600}

/* ---- note callout ---------------------------------------------------- */
.cortex-note{
  margin:22px 0 0;padding:14px 18px;
  border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:10px;background:var(--muted);
  font-size:14px;line-height:1.55;color:var(--muted-fg);
}
.cortex-note b{color:var(--fg);font-weight:600}

/* ---- code ------------------------------------------------------------- */
pre{
  margin:18px 0 0;padding:16px 18px;
  overflow-x:auto;
  background:var(--muted);border:1px solid var(--border);border-radius:12px;
  font-family:var(--mono);font-size:13.5px;line-height:1.7;color:var(--fg);
}
code{
  font-family:var(--mono);font-size:.92em;
  background:var(--accent-tint);color:var(--fg);
  padding:2px 6px;border-radius:5px;
}
pre code{background:none;padding:0;border-radius:0;font-size:1em}

@media(max-width:640px){
  .cortex-nav{padding:10px 16px;gap:12px}
  .cortex-nav__links{gap:14px;font-size:13.5px}
  .cortex-container{padding:28px 16px 64px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}