/* ──────────────────────────────────────────────────────────
   base.css — reset, body, global typography, a11y defaults
   ────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;600;700;900&family=IBM+Plex+Mono:wght@300;400;500&family=Barlow:wght@300;400;500&display=swap');

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

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  padding-bottom: 36px;          /* clears fixed ticker */
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

input, select, textarea {
  font: inherit;
  color: inherit;
}

/* Skip-to-content link (a11y) */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--text);
  color: var(--bg);
  padding: 10px 16px;
  z-index: 10000;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.skip-link:focus { top: 0; }

/* Focus rings (visible everywhere, replace browser default) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Headings — default sizes; pages can override */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 900; line-height: 1.0; letter-spacing: -0.01em; text-transform: uppercase; }
h1 { font-size: var(--fs-display-xl); }
h2 { font-size: var(--fs-display-l);  }
h3 { font-size: var(--fs-display-m); font-weight: 700; }
h4 { font-size: var(--fs-title);     font-weight: 700; }

p { font-size: inherit; }

/* Mono labels */
.mono-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Tabular numbers for prices, stats */
.tabular { font-variant-numeric: tabular-nums; }

/* Selection */
::selection { background: var(--accent); color: white; }

/* ─── CUSTOM CURSOR ─── */
/* Both elements share the same anchor (top:0, left:0). animations.js
   positions them via transform from that origin, applying the half-size
   offset (-5px for the 10x10 dot, -18px for the 36x36 ring) so each one
   centres on the eased mouse position. Mismatched anchors would shift
   the dot out of the ring. */
#cursor {
  width: 10px; height: 10px;
  background: var(--accent);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  transform: translate(-100px, -100px);       /* parked off-screen until JS fires */
  pointer-events: none;
  z-index: 99999;
}
#cursor-ring {
  width: 36px; height: 36px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  transform: translate(-100px, -100px);
  pointer-events: none;
  z-index: 99998;
}

/* Hide native cursor and show custom only on fine-pointer + hover devices */
@media (pointer: fine) and (hover: hover) {
  body { cursor: none; }
  a, button,
  .nav-cta, .btn-primary, .btn-ghost,
  .role-row, .role-arrow, .role-apply-btn,
  .apply-submit-btn, .apply-cancel-btn,
  .apply-drop-zone, .apply-modal-close,
  .form-submit { cursor: none; }
}

/* Hide the custom cursor elements on touch / coarse pointer */
@media (pointer: coarse), (hover: none) {
  #cursor, #cursor-ring { display: none !important; }
}