/* ============================================================
   GOTESTUDIO — design tokens + reset
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---- ground ---- */
  --bg:        #000000;
  --surface:   #0c0c0c;

  /* ---- ink ----
     Every tier carries real text and clears WCAG AA on black:
     .72 ≈ 9:1, .58 ≈ 6.4:1. */
  --text:      #f5f5f3;
  --text-2:    rgba(245,245,243,.72);
  --text-3:    rgba(245,245,243,.58);
  --line:      rgba(255,255,255,.14);
  --line-2:    rgba(255,255,255,.3);
  --error:     #ff8f86;

  /* ---- type ---- */
  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;

  --t-hero:  clamp(40px, 8.2vw, 136px);
  --t-h2:    clamp(28px, 4.2vw, 60px);
  --t-lead:  clamp(18px, 1.7vw, 24px);
  --t-large: clamp(21px, 2.3vw, 34px);
  --t-body:  16px;
  --t-sm:    14px;
  --t-xs:    12px;

  /* ---- space ---- */
  --gutter:  clamp(16px, 4vw, 56px);
  --section: clamp(96px, 14vw, 208px);
  --max:     1480px;
  --header-h: 60px;

  /* ---- motion ---- */
  --ease: cubic-bezier(.16,1,.3,1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.55;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, video, svg { max-width: 100%; display: block; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }

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

::selection { background: var(--text); color: var(--bg); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 10px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--text);
  color: var(--bg);
  font-size: var(--t-xs);
  font-weight: 600;
  border-radius: 999px;
}
.skip-link:focus { left: var(--gutter); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}