/* ============================================================
   TRACE BASE — fonts, tokens, reset, typography, buttons.

   One copy of what every Trace-system page needs before its own
   sheet. Previously duplicated verbatim in mcp-page.css,
   support-page.css and landing.html's inline <style>; the TODO at
   the top of support-page.css asked for exactly this extraction.

   Load order on every page:
     /assets/trace-base.css      <- this file
     /assets/trace-chrome.css    <- nav / footer / modal
     <page>.css                  <- page-specific rules

   Companion markup: partials/nav.html, partials/footer.html,
   partials/access-modal.html, inlined at build time.
   ============================================================ */

/* Self-hosted webfonts, matching this repo's existing convention.
   Bricolage Grotesque and Instrument Sans are variable faces: one file each
   covers every weight used, so they are declared with a weight range. */
@font-face{ font-family:'Bricolage Grotesque'; src:url('/fonts/Bricolage-Grotesque-var.woff2') format('woff2'); font-weight:500 800; font-style:normal; font-display:swap; }
@font-face{ font-family:'Instrument Sans';     src:url('/fonts/Instrument-Sans-var.woff2')     format('woff2'); font-weight:400 600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Space Mono'; src:url('/fonts/Space-Mono-400.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Space Mono'; src:url('/fonts/Space-Mono-700.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
/* Usual is the pre-Trace brand face. Kept because --display falls back to it
   and the legacy /docs sheets still ask for it by name. */
@font-face{ font-family:'Usual'; src:url('/fonts/Usual-300.woff') format('woff'); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'Usual'; src:url('/fonts/Usual-400.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Usual'; src:url('/fonts/Usual-500.woff') format('woff'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Usual'; src:url('/fonts/Usual-700.woff') format('woff'); font-weight:700; font-style:normal; font-display:swap; }

:root{
  /* light paper - Trace */
  --paper:      #F7F7F5;
  --paper-2:    #EBEBE7;
  --light-card: #FFFFFF;
  --card:       #FFFFFF;

  /* neutral darks - Trace app-dark, no blue tint */
  --ink:        #121212;
  --ink-card:   #1C1C1C;
  --ink-2:      #2B2B2B;
  --ink-border: rgba(255,255,255,0.08);
  --ink-border2:rgba(255,255,255,0.14);

  --ink-warm:   #3A3C4A;   /* display titles on light */
  --cream:      #ECE9E3;   /* on-dark text - never pure white except hero */
  --ink-soft:   rgba(18,18,18,0.68);
  --ink-mute:   rgba(18,18,18,0.45);
  --cream-soft: rgba(236,233,227,0.68);
  --cream-mute: rgba(236,233,227,0.42);
  --line:       rgba(18,18,18,0.10);
  --line-2:     rgba(18,18,18,0.16);   /* a step stronger, for a badge stroke */

  /* Pace teal - PRIMARY, AA on white ~5:1 */
  --teal:       #0C7C6E;
  --teal-hover: #0A695D;
  --teal-tint:  rgba(12,124,110,0.10);
  --teal-border:rgba(12,124,110,0.30);

  /* mint - on DARK surfaces only (footer link hover, modal focus) */
  --mint:       #0CFFD4;
  --mint-2:     #A8E6E4;
  --mint-tint:  rgba(12,255,212,0.10);
  --mint-border:rgba(12,255,212,0.22);

  --amber:      #FFB830;
  --amber-tint: rgba(255,184,48,0.14);
  --amber-line: rgba(255,184,48,0.45);

  --display: 'Bricolage Grotesque', 'Usual', -apple-system, BlinkMacSystemFont, sans-serif;
  --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Space Mono', 'SF Mono', ui-monospace, monospace;

  /* radius - tight */
  --r-tag: 5px;
  --r-btn: 6px;
  --r-card: 8px;
  --r-panel: 10px;
  --r-full: 9999px;

  --max-w: 1240px;
  --gutter: 20px;

  --transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg{ max-width:100%; }
img{ display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
/* the nav + drawer "Request access" triggers are <button>, so they need this or
   they pick up the browser's default font, border and background */
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

/* Headings balance; prose gets `pretty` so no single-word last lines. */
h1,h2,h3,.disp{
  font-family:var(--display);
  font-weight:800;
  line-height:1.0;
  letter-spacing:-0.015em;
  text-wrap:balance;
  color:var(--ink-warm);
}
p{ text-wrap:pretty; }

.container{ max-width:var(--max-w); margin:0 auto; padding:0 var(--gutter); }
.container--narrow{ max-width:820px; }

/* ============ BUTTONS ============ */
.btn{
  display:inline-block;
  font-weight:600; font-size:.92rem;
  padding:9px 16px;
  border-radius:var(--r-btn);
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  text-align:center;
}
.btn:hover{ transform:translateY(-1px); }
.btn--teal{ background:var(--teal); color:#fff; }
.btn--teal:hover{ background:var(--teal-hover); }
.btn--ink{ background:var(--ink); color:var(--cream); }
.btn--ink:hover{ background:#000; }
.btn--cream{ background:var(--cream); color:var(--ink); }
.btn--cream:hover{ background:#fff; }
.btn--outline{ border:1.5px solid var(--ink); padding:7.5px 14.5px; }
.btn--outline:hover{ background:var(--ink); color:var(--cream); }
.btn--outline-cream{ border:1.5px solid var(--cream-mute); color:var(--cream); padding:7.5px 14.5px; }
.btn--outline-cream:hover{ background:var(--cream); color:var(--ink); border-color:var(--cream); }
.btn--lg{ font-size:.98rem; padding:11px 20px; }
.btn--outline.btn--lg, .btn--outline-cream.btn--lg{ padding:9.5px 18.5px; }

/* ============ SCROLL REVEAL ============ */
/* (NOT .reveal - that name is reserved) */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); }
.rv.rv-in{ opacity:1; transform:none; }

/* staggered entrance for groups whose children hold a static transform (the card fan).
   Driven by ANIMATION, not transition, on purpose: transition-delay applies to every
   transitioned property, so the delay stayed on `transform` after the reveal and hover
   had to wait up to .45s before moving. Animation keeps `transition` free for hover,
   and animating opacity only leaves the fan's rotate() untouched. */
.rv-fade > *{ opacity:0; }
.rv-fade.rv-in > *{ animation:rvFade .55s cubic-bezier(.2,.6,.2,1) both; }
.rv-fade.rv-in > *:nth-child(1){ animation-delay:.05s }
.rv-fade.rv-in > *:nth-child(2){ animation-delay:.13s }
.rv-fade.rv-in > *:nth-child(3){ animation-delay:.21s }
.rv-fade.rv-in > *:nth-child(4){ animation-delay:.29s }
.rv-fade.rv-in > *:nth-child(5){ animation-delay:.37s }
.rv-fade.rv-in > *:nth-child(6){ animation-delay:.45s }
@keyframes rvFade{ from{ opacity:0 } to{ opacity:1 } }

/* staggered cascade: children rise one-after-another when the group enters.
   Unlike .rv-fade these children carry no static transform, so transition-delay
   is safe and gives the smoother rise. */
.rv-stagger > *{ opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.2,.6,.2,1), transform .6s cubic-bezier(.2,.6,.2,1); }
.rv-stagger.rv-in > *{ opacity:1; transform:none; }
.rv-stagger.rv-in > *:nth-child(1){ transition-delay:.05s }
.rv-stagger.rv-in > *:nth-child(2){ transition-delay:.13s }
.rv-stagger.rv-in > *:nth-child(3){ transition-delay:.21s }
.rv-stagger.rv-in > *:nth-child(4){ transition-delay:.29s }
.rv-stagger.rv-in > *:nth-child(5){ transition-delay:.37s }

@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  .rv-fade > *{ opacity:1; animation:none; }
  .rv-stagger > *{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; }
}