/* Noezis — shared design tokens & layout primitives
   Included by all pages (landing, pricing, docs).
   Page-specific rules live in each page's own <style> block. */

:root{
  --ink:#0A0C10; --surface:#11151C; --surface2:#0E1218;
  --line:#1D2430; --line2:#283140;
  --fg:#E7EAF0; --muted:#8B94A4; --faint:#5A6473;
  /* 4 epistemic states */
  --known:#46D6BE; --contested:#E0A33E; --stale:#8E86D6; --missing:#56606F;
  --accent:var(--known);
  --maxw:1100px;
  --f-display:"Space Grotesk",system-ui,sans-serif;
  --f-body:"Inter",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
}

/* reset */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
::selection{background:rgba(70,214,190,.25)}
:focus-visible{outline:2px solid var(--known);outline-offset:3px;border-radius:3px}

/* layout utility */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* sticky nav */
nav{position:sticky;top:0;z-index:10;backdrop-filter:blur(10px);
  background:rgba(10,12,16,.72);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:62px}

/* brand mark */
.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--f-mono);
  font-weight:500;letter-spacing:.02em;font-size:1.02rem;text-decoration:none;color:var(--fg)}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--known);
  box-shadow:0 0 0 4px rgba(70,214,190,.14)}

/* buttons */
.btn{font-family:var(--f-mono);font-size:.85rem;text-decoration:none;
  padding:.55rem .9rem;border:1px solid var(--line2);border-radius:7px;
  color:var(--fg);transition:border-color .2s,background .2s}
.btn:hover{border-color:var(--known);background:rgba(70,214,190,.06)}
.btn-primary{background:var(--known);color:#04201b;border-color:var(--known);font-weight:500}
.btn-primary:hover{background:#5fe6cf}
.btn[aria-current=page]{border-color:var(--known);color:var(--known);background:rgba(70,214,190,.06)}

/* shared text utilities */
.mono{font-family:var(--f-mono)}
.eyebrow{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted)}

/* footer (base; pages can add border-top / margin-top) */
footer{padding:54px 0;color:var(--faint);font-size:.85rem}
footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center}
footer .mono{color:var(--muted)}
footer .flink{color:var(--muted);text-decoration:none;font-size:.85rem}
footer .flink:hover{color:var(--known);text-decoration:underline}

/* nav drawer — base (desktop : liens en ligne, burger caché) */
.navlinks{display:flex;gap:.6rem;align-items:center}
.burger,.backdrop{display:none}

/* responsive — drawer mobile (menu hamburger qui slide depuis la droite) */
@media(max-width:640px){
  .wrap{padding:0 16px}
  nav .wrap{height:62px}
  /* bouton hamburger */
  .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:40px;padding:0 10px;border:1px solid var(--line2);
    border-radius:9px;cursor:pointer;background:var(--surface2);z-index:40}
  .burger span{display:block;height:2px;width:100%;background:var(--fg);
    border-radius:2px;transition:transform .28s ease,opacity .2s ease}
  /* panneau drawer */
  .navlinks{position:fixed;top:0;right:0;height:100dvh;width:min(80vw,300px);
    flex-direction:column;align-items:stretch;gap:.3rem;
    padding:5.2rem 1rem 1.2rem;background:var(--surface);
    border-left:1px solid var(--line);box-shadow:-24px 0 60px rgba(0,0,0,.45);
    transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:35}
  .navlinks .btn{border:0;border-radius:9px;text-align:left;font-size:1rem;
    padding:.9rem 1rem;background:transparent}
  .navlinks .btn:hover,.navlinks .btn[aria-current=page]{background:rgba(70,214,190,.1);color:var(--known)}
  /* backdrop */
  .backdrop{display:block;position:fixed;inset:0;background:rgba(4,6,9,.55);
    opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:30}
  /* état ouvert (checkbox-hack) */
  .navtog:checked ~ .navlinks{transform:translateX(0)}
  .navtog:checked ~ .backdrop{opacity:1;pointer-events:auto}
  .navtog:checked ~ .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .navtog:checked ~ .burger span:nth-child(2){opacity:0}
  .navtog:checked ~ .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}