/* ============================================================
   SphotaLens — design tokens, fonts, reset, base type
   Locked to the Brand Bible. No glows/gradients on the mark.
   Amber appears exactly once per view (the single focal click).
   ============================================================ */

/* ---- Self-hosted fonts (woff2, latin subset) ---- */
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/manrope-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/manrope-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/manrope-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/manrope-latin-800-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("../fonts/fraunces-latin-500-italic.woff2") format("woff2");
}

/* ---- Tokens ---- */
:root {
  /* brand palette */
  --bg:          #15181C;  /* Aperture Charcoal */
  --bg-elev:     #1B1F24;  /* derived elevated surface */
  --bg-elev-2:   #21262C;  /* derived, hover */
  --text:        #EDEFEC;  /* Daylight */
  --text-muted:  #7E8794;  /* Focus Grey (AA on charcoal ~4.9:1) */
  --text-subtle: #5C6470;  /* Focus Grey Deep — large/decorative only */
  --teal:        #1FE0C5;  /* Electric Teal */
  --teal-deep:   #12B5A0;  /* teal on light */
  --amber:       #FFB23C;  /* Signal Amber — the single click */
  --border:      rgba(237, 239, 236, 0.09);
  --border-strong: rgba(237, 239, 236, 0.16);
  --focus-ring:  #1FE0C5;

  /* type */
  --f-display: "Manrope", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, monospace;
  --f-quote:   "Fraunces", Georgia, serif;

  /* spacing scale (4px base) */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-8: 3rem;    --s-10: 4rem;
  --s-12: 6rem;   --s-16: 8rem;   --s-20: 12rem;

  /* layout */
  --maxw: 1200px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --radius: 10px;
  --section-y: clamp(5rem, 10vw, 8rem);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Type roles ---- */
.eyebrow {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  color: var(--teal);
}
.display-xl {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
}
.display-l {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.heading-m { font-weight: 700; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.01em; }
.heading-s { font-weight: 600; font-size: 1.25rem; line-height: 1.25; }
.body-l { font-size: 1.125rem; line-height: 1.6; }
.muted { color: var(--text-muted); }
.quote {
  font-family: var(--f-quote);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.3;
}

/* ---- Wordmark ---- */
.wordmark {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -0.022em;
  white-space: nowrap;
}
.wordmark .wm-sphota { color: var(--text); }
.wordmark .wm-lens   { color: var(--text-muted); }
.wordmark .wm-dot    { color: var(--amber); }

/* ---- Utilities ---- */
.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 0; top: 0; transform: translateY(-120%);
  background: var(--teal); color: var(--bg); padding: 0.5rem 1rem;
  font-weight: 700; z-index: 100; transition: transform 0.15s var(--ease);
}
.skip-link:focus { transform: translateY(0); }