/* Mount Si Labs — design tokens from the Claude Design project (granite and evergreen).
   Light theme is the default; dark theme mirrors it via prefers-color-scheme. */

/* ---- colors ---- */
:root{
  --ink:#1f2733;
  --granite:#5c6672;
  --mist:#f4f5f2;
  --card:#ffffff;
  --evergreen:#2e5339;
  --evergreen-hover:#244230;
  --line:#e2e4de;
  --line-strong:#c9ccc4;

  --text-body:var(--ink);
  --text-muted:var(--granite);
  --text-accent:var(--evergreen);
  --text-on-accent:#ffffff;
  --surface-page:var(--mist);
  --surface-card:var(--card);
  --surface-sunken:#eceee8;
  --border-subtle:var(--line);
  --border-strong:var(--line-strong);
  --link:var(--evergreen);
  --link-hover:var(--evergreen-hover);
  --focus-ring:var(--evergreen);
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#e8eaed;
    --granite:#a6adb7;
    --mist:#171c22;
    --card:#1f2733;
    --evergreen:#7fae8c;
    --evergreen-hover:#9cc7a7;
    --line:#2d3742;
    --line-strong:#3d4854;

    --text-on-accent:#12181e;
    --surface-sunken:#12171c;
  }
}

/* ---- typography: system stack only, no webfonts, no external requests ---- */
:root{
  --font-system:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font-body:var(--font-system);

  --text-display:2rem;
  --text-heading:1.25rem;
  --text-base:1.0625rem;
  --text-small:0.875rem;

  --leading-body:1.6;
  --leading-tight:1.2;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;

  --tracking-display:-0.01em;
  --tracking-normal:0;

  --measure:70ch;
}

/* ---- spacing: 8px rhythm with a 4px half-step ---- */
:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:16px;
  --space-4:24px;
  --space-5:32px;
  --space-6:48px;
  --space-7:64px;
  --space-8:96px;

  --page-max:720px;
  --page-gutter:var(--space-4);
  --card-min:280px;
  --stack-gap:var(--space-3);
  --section-gap:var(--space-6);
}

/* ---- borders ---- */
:root{
  --radius-sm:6px;
  --radius-md:8px;
  --border-width:1px;
  --border-card:var(--border-width) solid var(--border-subtle);
  --shadow-card:0 1px 3px rgba(0,0,0,.08);
  --shadow-none:none;
  --focus-outline-width:2px;
  --focus-outline-offset:2px;
}

/* ---- element defaults ---- */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-body);text-wrap:pretty}
h1,h2,h3{line-height:var(--leading-tight);margin:0}
p{margin:0}
a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--link-hover)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:var(--focus-outline-width) solid var(--focus-ring);outline-offset:var(--focus-outline-offset);border-radius:2px}

/* ---- page ---- */
.container{max-width:var(--page-max);margin:0 auto;padding:var(--space-8) var(--page-gutter) var(--space-6);box-sizing:border-box}
.site-header{margin-bottom:var(--space-6)}
.wordmark{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-display);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-display);color:var(--text-accent)}
.wordmark svg{display:block;flex:none}
a.wordmark{text-decoration:none}
.page-title{font-size:var(--text-display);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-display);margin-top:var(--space-3)}
main{display:flex;flex-direction:column;gap:var(--section-gap)}
section{display:flex;flex-direction:column;gap:var(--stack-gap)}
.prose{max-width:var(--measure)}
h2{font-size:var(--text-heading);font-weight:var(--weight-semibold)}

/* ---- product cards ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--card-min),1fr));gap:var(--space-3)}
.card{display:flex;flex-direction:column;gap:var(--space-2);background:var(--surface-card);border:var(--border-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:var(--space-3)}
.card h3{font-size:var(--text-base);font-weight:var(--weight-semibold)}
.card .desc{font-size:var(--text-small);color:var(--text-muted)}
.card .card-link{margin-top:var(--space-1)}
.card .card-link a{font-size:var(--text-small)}

/* ---- contact ---- */
address{font-style:normal;display:flex;flex-direction:column;gap:var(--space-1)}
address .org{font-weight:var(--weight-medium)}
address .muted{color:var(--text-muted)}

/* ---- footer ---- */
.site-footer{margin-top:var(--space-8);padding-top:var(--space-4);border-top:var(--border-width) solid var(--border-subtle);display:flex;flex-wrap:wrap;gap:var(--space-2);font-size:var(--text-small);color:var(--text-muted)}