/* ═══════════════════════════════════════════════════════════
   Cymela — Base Styles
   Element-level styling applied globally
   ═══════════════════════════════════════════════════════════ */

/* ─── Google Fonts Import ─── */
/* ─── Self-hosted fonts ───────────────────────────────────────
   Served from this origin on purpose. Loading these from Google
   would hand every visitor's IP address to a third party on page
   load, which is personal data under GDPR and would contradict
   what the privacy policy says. Variable fonts: one file covers
   the whole 300-700 weight range.
   Inter and JetBrains Mono are both SIL Open Font License 1.1.
   See fonts/OFL-Inter.txt and fonts/OFL-JetBrainsMono.txt.

   Syncopate is Apache License 2.0 — a different licence from the
   other two, and one that asks for the licence text to travel with
   the file, so fonts/LICENSE-Syncopate-Apache-2.0.txt ships with it.
   Copyright (c) 2010 Brian J. Bonislawsky DBA Astigmatic (AOETI).
   ──────────────────────────────────────────────────────────── */

/* Inter — latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter — latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono — latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono — latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Syncopate — the wordmark only.
   Subset to the letters of "Cymela" in both cases: the full latin cut is
   17KB and this face sets six characters, so the other 200 glyphs would be
   dead weight in front of the logo. 2.6KB instead. If it is ever wanted for
   running text, re-cut it from the full family. */
@font-face {
  font-family: 'Syncopate';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/syncopate-wordmark.woff2') format('woff2');
}

/* ─── Body ─── */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--text-70);
  background-color: var(--surface-100);
  line-height: var(--leading-normal);
  overflow-x: hidden;
}

/* ─── Scrollbar ─── */
/* hidden entirely — scrolling still works, the track just isn't drawn */
::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Firefox */
* {
  scrollbar-width: none;
}

/* ─── Selection ─── */
::selection {
  background: var(--accent-dim);
  color: var(--text-100);
}

::-moz-selection {
  background: var(--accent-dim);
  color: var(--text-100);
}

/* ─── Headings ─── */
h1, h2, h3 {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--text-100);
  letter-spacing: var(--tracking-tight);
}

h1 {
  font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl));
  line-height: var(--leading-tight);
}

h2 {
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
  line-height: var(--leading-tight);
}

h3 {
  font-size: clamp(var(--text-xl), 2vw, var(--text-2xl));
  line-height: var(--leading-snug);
}

h4 {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--text-90);
  line-height: var(--leading-snug);
}

h5, h6 {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-50);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* ─── Paragraphs ─── */
p {
  color: var(--text-50);
  line-height: var(--leading-relaxed);
  max-width: 65ch;
}

p + p {
  margin-top: var(--space-4);
}

/* ─── Links ─── */
a {
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--text-100);
}

/* ─── Horizontal Rule ─── */
hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-8) 0;
}

/* ─── Code / Monospace ─── */
code, pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* ─── Strong / Emphasis ─── */
strong, b {
  font-weight: 600;
  color: var(--text-90);
}

em, i {
  font-style: italic;
  color: var(--text-70);
}

/* ─── Focus Styles ─── */
:focus-visible {
  outline: 2px solid var(--accent-muted);
  outline-offset: 2px;
}

/* ─── Image defaults ─── */
img {
  user-select: none;
  -webkit-user-drag: none;
}