/* Towerpully design tokens — generated from DESIGN.md (2026-09-10). Do not hardcode values elsewhere; extend here. */
/* Light palette also applies to any [data-theme="light"] element, so content laid over
   theme-independent media (e.g. Home's light hero wash) can pin light ink in dark mode. */
:root,[data-theme="light"]{
  --color-bg:#FDFDFC;
  --color-surface:#FFFFFF;
  --color-surface-muted:#E8ECEB;
  --color-text:#262A28;
  --color-text-muted:#626963;
  --color-primary:#E15A2E;
  --color-primary-hover:#C94B22;
  --color-on-primary:#FBF8F3;
  --color-secondary:#3E5C66;
  --color-border:#D8D9D1;
  --color-success:#4C7A5E;
  --color-warning:#B8863B;
  --color-error:#B23B24;
}
[data-theme="light"]{color-scheme:light;color:var(--color-text);}
:root{
  color-scheme:light dark;
  --font-display:'Paperlogy','SUIT Variable',sans-serif;
  --font-body:'SUIT Variable','SUIT',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;

  /* Type scale — extracted from shipped usage 2026-09-10, see DESIGN.md Typography.
     --text-base (17px) is the documented body size; --text-2xs (12px) is the documented
     label size. The rest formalizes sizes real components already needed. */
  --text-2xs:12px;
  --text-xs:14px;
  --text-sm:15px;
  --text-base:17px;
  --text-lg:19px;
  --text-xl:21px;
  --text-2xl:24px;
  --text-3xl:26px;
  --text-4xl:28px;
  --text-5xl:36px;
  --text-6xl:38px;

  --radius-sm:4px;
  --radius-md:6px;
  --radius-lg:8px;
  --radius-full:9999px;

  --space-xs:4px;
  --space-sm:8px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
  --space-2xl:48px;
  --space-3xl:96px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --color-bg:#20211C;
    --color-surface:#2A2B25;
    --color-surface-muted:#33342D;
    --color-text:#F3F1EA;
    --color-text-muted:#A6AA9E;
    --color-primary:#FF7A45;
    --color-primary-hover:#E15A2E;
    --color-on-primary:#20211C;
    --color-secondary:#8FA6AE;
    --color-border:#42433B;
  }
}
:root[data-theme="dark"]{
  --color-bg:#20211C;
  --color-surface:#2A2B25;
  --color-surface-muted:#33342D;
  --color-text:#F3F1EA;
  --color-text-muted:#A6AA9E;
  --color-primary:#FF7A45;
  --color-primary-hover:#E15A2E;
  --color-on-primary:#20211C;
  --color-secondary:#8FA6AE;
  --color-border:#42433B;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.65;
}
img{max-width:100%;display:block;}
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.16;
  margin:0;
}
p{margin:0;}
a{color:inherit;text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
@media (max-width:640px){.wrap{padding:0 18px;}}

.mono{font-family:var(--font-mono);font-feature-settings:"tnum";}

/* scroll reveal — functional only, per DESIGN.md Motion (medium 320ms, ease-out).
   Class is added by JS only when motion is allowed, so content stays visible
   with no JS and under prefers-reduced-motion. */
.reveal{opacity:0;transform:translateY(20px);}
.reveal.is-visible{opacity:1;transform:translateY(0);transition:opacity .32s ease-out,transform .32s ease-out;}

.label{
  font-family:var(--font-mono);
  font-size:var(--text-2xs);
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--color-secondary);
  display:inline-block;
  margin-bottom:var(--space-md);
}

/* header/nav */
header.site{
  position:sticky;top:0;background:var(--color-bg);z-index:20;
  box-shadow:0 1px 0 transparent;
  transition:box-shadow .15s ease;
}
header.site.is-scrolled{
  box-shadow:0 1px 0 var(--color-border);
}
header.site .wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;gap:24px;
}
/* 16px is an intentional brand-mark exception, outside the type ramp */
.wordmark{font-family:var(--font-mono);font-weight:600;font-size:16px;letter-spacing:.1em;}
.wordmark span{color:var(--color-primary);}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:600;font-size:var(--text-sm);
  padding:14px 26px;border-radius:var(--radius-md);cursor:pointer;border:none;
  transition:background .2s ease-out,color .2s ease-out,border-color .2s ease-out,transform .2s ease-out;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0) scale(.98);}
.btn-primary{background:var(--color-primary);color:var(--color-on-primary);}
.btn-primary:hover{background:var(--color-primary-hover);}
.btn-ghost{background:transparent;color:var(--color-text);border:1px solid var(--color-border);}
.btn-ghost:hover{border-color:var(--color-text-muted);}

/* spec baseline row */
.spec-strip{display:flex;gap:0;border-top:1px solid var(--color-border);padding-top:20px;flex-wrap:wrap;}
.spec-strip .item{padding-right:28px;margin-right:28px;border-right:1px solid var(--color-border);}
.spec-strip .item:last-child{border-right:none;margin-right:0;padding-right:0;}
.spec-strip .num{font-family:var(--font-mono);font-size:var(--text-xl);font-weight:600;}
.spec-strip .cap{font-size:var(--text-2xs);color:var(--color-text-muted);margin-top:2px;}

/* weight tick */
.tick-row{display:flex;align-items:flex-end;gap:2px;height:32px;}
.tick{position:relative;flex:1;background:var(--color-border);border-radius:1px;}
.tick:after{
  content:'';position:absolute;inset:0;background:var(--color-primary);border-radius:1px;
  opacity:0;transition:opacity .2s ease;
}
.tick.filled:after{opacity:1;}

/* sections */
section{padding:var(--space-3xl) 0;}
section.tight{padding:var(--space-2xl) 0;}
section.muted{background:var(--color-surface-muted);}
section.dark{background:var(--color-text);color:var(--color-bg);}
section.dark .label{color:var(--color-secondary);}

/* footer */
footer.site{border-top:1px solid var(--color-border);padding:var(--space-2xl) 0;}
footer.site .foot-grid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;}
footer.site .foot-nav{display:flex;gap:20px;flex-wrap:wrap;font-size:var(--text-xs);}

/* form */
.form-input,.form-select{
  width:100%;padding:13px 14px;border:1px solid var(--color-border);border-radius:var(--radius-sm);
  background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:var(--text-sm);
}
.form-input:focus-visible,.form-select:focus-visible{outline:2px solid var(--color-secondary);outline-offset:2px;border-color:var(--color-secondary);}
label.field-label{font-size:var(--text-xs);font-weight:600;margin-bottom:6px;display:block;}