/*
 * Svilo web, on the Moonstripe Cybernetics system (shared with
 * indradb.moonstripe.com and quietmcp.moonstripe.com). Source of truth for the
 * tokens and hierarchy: moonstripe-cybernetics/packages/ui/src/global.css.
 * Svilo's accent is its Dark Medici Blue. No scripts (strict CSP), so the theme
 * follows the visitor's OS setting via light-dark().
 */

@font-face {
  font-family: "Monaspace Neon";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/monaspace-neon-latin-400-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Monaspace Neon";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/monaspace-neon-latin-400-italic.woff2) format("woff2");
}
@font-face {
  font-family: "Monaspace Neon";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/monaspace-neon-latin-700-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Mona Sans Variable";
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(/static/fonts/mona-sans-latin-standard-normal.woff2) format("woff2-variations");
}

:root {
  color-scheme: light dark;
  --bg: light-dark(#fff, #000);
  --fg: light-dark(#000, #fff);
  --muted: light-dark(#6b6b6b, #8a8a8a);
  --rule: light-dark(#000, #fff);
  /* Dark Medici Blue (#417777): darkened for AA on white, lifted for black. */
  --accent: light-dark(#2f6464, #6fb3b3);
  --alert: light-dark(#c41700, #ff5a3c);
  --stripe: 0.66px;

  --mono: "Monaspace Neon", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Mona Sans Variable", system-ui, sans-serif;

  --measure: 66ch;
  --t-display: clamp(2.75rem, 7vw, 5rem);
  --t-title: clamp(2rem, 4.5vw, 3rem);
  --t-heading: 1.5rem;
  --t-subhead: 1.125rem;
  --t-lead: 1.25rem;
  --t-label: 0.72rem;
  --t-data: 0.8rem;
  --t-code: 0.875rem;
  --t-caption: 0.75rem;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 4rem);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:hover { color: var(--accent); }
:focus-visible { outline: var(--stripe) solid var(--accent); outline-offset: 4px; }

/* ---- Hierarchy (packages/ui/src/global.css) ---------------------------- */

h1, h2, h3 { font-family: var(--sans); color: var(--fg); text-wrap: balance; }
.hero h1 {
  font-size: var(--t-display); font-weight: 800; font-stretch: 112.5%;
  line-height: 0.98; letter-spacing: -0.03em; margin: 1rem 0 1.5rem;
}
h1 { font-size: var(--t-title); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin: 3rem 0 1rem; }
h2 { font-size: var(--t-heading); font-weight: 650; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 0.75rem; }
h3 { font-size: var(--t-subhead); font-weight: 600; line-height: 1.3; margin: 0 0 0.5rem; }
p, li { max-width: var(--measure); }
.lead { font-size: var(--t-lead); line-height: 1.5; max-width: var(--measure); }
.label, .muted, th, footer, .price small {
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.strong { font-family: var(--mono); font-size: var(--t-data); color: var(--fg); margin: 0.25rem 0 1rem; }
.muted { margin: 0.25rem 0; }
code, pre { font-family: var(--mono); font-size: var(--t-code); }
button, input, select, textarea, svg text { font-family: var(--mono); }

/* ---- Frame -------------------------------------------------------------- */

header.top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.5rem 0; border-bottom: var(--stripe) solid var(--rule);
}
header.top .brand {
  font-family: var(--sans); font-size: var(--t-heading); font-weight: 700;
  text-decoration: none;
}
header.top nav { display: flex; gap: 1.5rem; font-family: var(--mono); font-size: var(--t-data); }
main { padding: 1rem 0 5rem; min-height: 60vh; }
footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  padding: 1.5rem 0 2.5rem; border-top: var(--stripe) solid var(--rule);
  text-transform: none; letter-spacing: 0.04em;
}
footer a { color: var(--fg); }
section { margin: 2rem 0; }

/* ---- Components (square, hairline) -------------------------------------- */

.hero { padding: 3rem 0 2rem; max-width: 56rem; }
.hero .label { margin: 0; }
.panel { border: var(--stripe) solid var(--rule); padding: 1.25rem 1.5rem; }
.notice { border-left: 3px solid var(--accent); padding: 0.5rem 1rem; }
.alert { color: var(--alert); }
.current { color: var(--accent); font-family: var(--mono); font-size: var(--t-data); }
.actions, .links { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.actions { margin-top: 2rem; }
.links form { margin: 0; }
.features, .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem; }
.features .panel { border-width: 0 0 var(--stripe); padding: 1rem 0; }
.features .panel p { color: var(--muted); }
.plan ul { padding-left: 1.1rem; }
.features .panel h2 { font-size: var(--t-subhead); font-weight: 600; }
.price { font-family: var(--sans); font-size: var(--t-heading); font-weight: 650; margin: 0.25rem 0; }
.button, button {
  display: inline-block; cursor: pointer; text-decoration: none;
  font-family: var(--mono); font-size: var(--t-code);
  color: var(--fg); background: var(--bg);
  border: var(--stripe) solid var(--rule); border-radius: 0; padding: 0.6rem 1rem;
}
.button:hover, button:hover { color: var(--accent); border-color: var(--accent); }
.primary { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.primary:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
/* Not an action yet: the macOS app has no release. Reads as a state, not a button. */
.pending, .pending:hover { color: var(--muted); border-color: var(--muted); cursor: default; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.6rem 0.25rem; border-bottom: var(--stripe) solid var(--rule); }
th { font-weight: 400; }
.meter { height: 0.5rem; border: var(--stripe) solid var(--rule); overflow: hidden; margin: 0.5rem 0; }
.meter .fill { height: 100%; background: var(--accent); }
.meter .w0 { width: 0; } .meter .w5 { width: 5%; } .meter .w10 { width: 10%; }
.meter .w15 { width: 15%; } .meter .w20 { width: 20%; } .meter .w25 { width: 25%; }
.meter .w30 { width: 30%; } .meter .w35 { width: 35%; } .meter .w40 { width: 40%; }
.meter .w45 { width: 45%; } .meter .w50 { width: 50%; } .meter .w55 { width: 55%; }
.meter .w60 { width: 60%; } .meter .w65 { width: 65%; } .meter .w70 { width: 70%; }
.meter .w75 { width: 75%; } .meter .w80 { width: 80%; } .meter .w85 { width: 85%; }
.meter .w90 { width: 90%; background: var(--alert); } .meter .w95 { width: 95%; background: var(--alert); }
.meter .w100 { width: 100%; background: var(--alert); }

/* ---- Figure (descriptive diagram) ---------------------------------------- */

.figure { margin: 2rem 0; padding: 1.25rem; border: var(--stripe) solid var(--rule); }
.figure figure { margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.figure svg.diagram { display: block; width: 100%; height: auto; overflow: visible; }
.figure figcaption {
  font-family: var(--mono); font-size: var(--t-caption); color: var(--muted);
  letter-spacing: 0.04em; text-transform: uppercase;
  border-top: var(--stripe) solid var(--rule); padding-top: 0.75rem;
}
.figure figcaption strong { color: var(--fg); }

/* Copied from moonstripe-cybernetics/packages/ui/src/diagrams/diagrams.css
   (iso rules only); keep in sync when that file changes. */
.diagram { --diagram-accent: var(--accent); }
.diagram [data-part] { cursor: default; outline: none; }
.diagram :is(polygon, line, text) {
  transition: stroke 180ms ease, fill 180ms ease, stroke-opacity 180ms ease, fill-opacity 180ms ease;
}
@media (prefers-reduced-motion: no-preference) {
  .diagram [data-part] { animation: diagram-breathe 9s ease-in-out infinite; }
}
@keyframes diagram-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(var(--lift, 0) * -1px)); }
}
.diagram [data-lift="4"] { --lift: 4; }
.diagram [data-lift="8"] { --lift: 8; }
.diagram [data-lift="12"] { --lift: 12; }
.diagram [data-lift="16"] { --lift: 16; }
.diagram [data-lift="20"] { --lift: 20; }
.diagram [data-lift="24"] { --lift: 24; }
.diagram [data-lift="28"] { --lift: 28; }
.diagram:has([data-part]:is(:hover, :focus-visible)) [data-part]:not(:is(:hover, :focus-visible)) :is(polygon, line) { stroke-opacity: 0.3; }
.diagram:has([data-part]:is(:hover, :focus-visible)) [data-part]:not(:is(:hover, :focus-visible)) text { fill-opacity: 0.3; }
.diagram [data-part]:is(:hover, :focus-visible) :is(polygon, line) { stroke: var(--diagram-accent); }
.diagram [data-part]:is(:hover, :focus-visible) text { fill: var(--diagram-accent); }

@media (max-width: 40rem) {
  header.top nav { gap: 1rem; }
}