/* RAYTUNER — site.css
   Refined instrument · revision 3
   Tokens: Refined-instrument/Tokens.json + Brand-guide.md
   Spacing scale: 4 / 6 / 8 / 12 / 16 / 24 / 32 / 48 px.
   Radii: 0 (rules), 4px (inputs/tags), 6px (buttons/selection), 12px (brand lockup), 36px (device frames).
   Strokes: 1px rules, 2px focus. No shadows.
*/

:root {
  color-scheme: light dark;

  /* Brand */
  --forest: #126B43;
  --night: #101916;
  --mint: #68E0A4;
  --chalk: #F6F8F4;
  --ink: #14271E;

  /* Semantic (light) */
  --bg: #F6F8F4;
  --surface: #E6EEE7;
  --text: #14271E;
  --muted: #486353;
  --line: #637C6C;
  --good: #126B43;
  --close: #765800;
  --far: #A13C24;

  /* Spacing */
  --s1: 4px;
  --s2: 6px;
  --s3: 8px;
  --s4: 12px;
  --s5: 16px;
  --s6: 24px;
  --s7: 32px;
  --s8: 48px;

  /* Radii */
  --radius-xs: 4px;
  --radius: 6px;
  --radius-brand: 12px;
  --radius-device: 36px;

  --font: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101916;
    --surface: #1D2A25;
    --text: #F3F7F4;
    --muted: #B5C7BC;
    --line: #789587;
    --good: #68E0A4;
    --close: #F0CE70;
    --far: #FFAB91;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem; /* 17 px body, per design spec */
  line-height: 1.5;
  overflow-wrap: break-word;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
p,
ul,
dl,
dd,
figure {
  margin: 0;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: var(--s5);
  top: var(--s5);
  z-index: 10;
  padding: var(--s3) var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform 0.15s ease-out;
}

.skip-link:focus {
  transform: none;
}

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--s6);
}

/* Header */
.site-header .wrap {
  padding-top: var(--s8);
  padding-bottom: var(--s7);
}

.brand {
  display: inline-block;
  border-radius: var(--radius-brand);
}

.brand img {
  width: 200px;
}

/* Hero */
.hero {
  padding-bottom: var(--s8);
}

.hero-grid {
  display: grid;
  gap: var(--s7);
}

.hero h1 {
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.tagline {
  margin-top: var(--s4);
  font-size: 1.75rem;
  line-height: 1.25;
  font-weight: 600;
  color: var(--good);
  letter-spacing: -0.015em;
}

.lede {
  margin-top: var(--s5);
  max-width: 32em;
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1.55;
}

.availability {
  display: inline-flex;
  align-items: center;
  margin-top: var(--s6);
  padding: var(--s3) var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* Device preview frames */
.device {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

.device img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-device);
}

.device figcaption {
  margin-top: var(--s4);
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted);
}

/* Sections */
.section {
  padding: var(--s8) 0;
  border-top: 1px solid var(--line);
}

.section h2 {
  font-size: 1.75rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.section-note {
  margin-top: var(--s2);
  color: var(--muted);
  font-size: 0.9375rem;
}

/* Refined Instrument Chassis & Panels */
.cards {
  display: grid;
  gap: var(--s5);
  margin-top: var(--s6);
  padding: 0;
  list-style: none;
}

.card {
  padding: var(--s6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  display: flex;
  flex-direction: column;
}

.card h3 {
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.card p {
  margin-top: var(--s3);
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
}

/* Note readouts & status list */
.status-list {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s5);
  padding: 0;
  list-style: none;
}

.status {
  font-size: 1.0625rem;
  font-weight: 600;
  padding: var(--s2) var(--s4);
  border-radius: var(--radius-xs);
  border-left: 3px solid transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status span {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-size: 0.9375rem;
}

.status-good {
  color: var(--good);
  background: var(--surface);
  border-left-color: var(--good);
}

.status-close {
  color: var(--close);
}

.status-far {
  color: var(--far);
}

/* Presets panel */
.presets {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s5);
}

.presets div {
  padding: var(--s2) var(--s4);
  border-radius: var(--radius-xs);
  border-left: 3px solid transparent;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s1);
}

.presets div:first-child {
  background: var(--surface);
  border-left-color: var(--good);
}

.presets dt {
  font-weight: 600;
}

.presets div:first-child dt {
  color: var(--good);
}

.presets dd {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}

/* Gallery */
.gallery {
  display: grid;
  gap: var(--s7);
  margin-top: var(--s6);
}

/* Footer */
.site-footer {
  padding: var(--s7) 0 var(--s8);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.875rem;
}

/* 404 */
.notfound {
  padding: var(--s7) 0 var(--s8);
}

.notfound h1 {
  font-size: 2rem;
  line-height: 1.2;
}

.notfound p {
  margin-top: var(--s4);
  color: var(--muted);
}

.notfound .home {
  display: inline-block;
  margin-top: var(--s6);
  padding: var(--s3) var(--s5);
  border-radius: var(--radius);
  background: var(--good);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
}

/* Responsive: Tablet and up */
@media (min-width: 768px) {
  .hero-grid {
    grid-template-columns: 1fr 300px;
    align-items: center;
    gap: var(--s8);
  }

  .hero h1 {
    font-size: 2.5rem;
  }

  .brand img {
    width: 240px;
  }

  .cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s5);
  }
}

/* Responsive: Desktop */
@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr 340px;
  }

  .hero-device {
    max-width: 340px;
  }

  .hero h1 {
    font-size: 3rem;
  }

  .cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .card-presets {
    grid-column: span 2;
  }

  .card-presets .presets {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s3) var(--s5);
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}