/* ============================================================
   Ruud van der Linden — shared design tokens
   Cinematic dark · cool blue · broadcast/streaming energy
   Fonts (Archivo + JetBrains Mono) load via <link> in index.html
   so the request starts before this stylesheet is parsed.
   ============================================================ */

:root{
  /* ---- palette (cool, near-black with blue accent) ---- */
  --bg:        #07090d;
  --bg-1:      #0a0d12;
  --bg-2:      #0e1218;
  --bg-3:      #141a23;
  --panel:     #10151c;
  --line:      rgba(233,238,245,0.10);
  --line-soft: rgba(233,238,245,0.06);
  --text:      #e9eef5;
  --text-dim:  #97a4b6;
  --text-faint:#6b7a8e;

  /* accent: everything blue derives from this one value */
  --accent:        oklch(0.70 0.15 248);
  --accent-bright: color-mix(in oklab, var(--accent), white 26%);
  --accent-ink:    color-mix(in oklab, var(--accent), black 80%);
  --accent-glow:   color-mix(in oklab, var(--accent) 38%, transparent);

  /* ---- type ---- */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body:    'Archivo', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---- density ---- */
  --space-scale: 1;
  --section-pad: calc(120px * var(--space-scale));
  --gap:         calc(24px * var(--space-scale));

  /* ---- motion ---- */
  --t-fast: calc(0.18s);
  --t:      calc(0.4s);
  --t-slow: calc(0.9s);
  --vs-anim: running; /* video-slot ambient animation play state */

  --maxw: 1280px;
  color-scheme: dark;
}

*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  font-feature-settings:"ss01","cv01";
  overflow-x:hidden;
}
::selection{ background:var(--accent); color:var(--accent-ink); }

a{ color:inherit; text-decoration:none; }
img,video{ display:block; max-width:100%; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:800; line-height:0.98; letter-spacing:-0.02em; }

/* ---- shared utility ---- */
.mono{ font-family:var(--font-mono); font-weight:500; letter-spacing:0.02em; }
.eyebrow{
  font-family:var(--font-mono); font-size:12px; font-weight:600;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--accent-bright);
}
.dim{ color:var(--text-dim); }
.faint{ color:var(--text-faint); }
.wrap{ width:min(100% - 48px, var(--maxw)); margin-inline:auto; }
.tnum{ font-variant-numeric:tabular-nums; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:13px; font-weight:600;
  letter-spacing:0.04em; text-transform:uppercase;
  padding:13px 20px; border-radius:2px; cursor:pointer;
  border:1px solid var(--line); color:var(--text);
  background:transparent; transition:all var(--t-fast) ease;
}
.btn:hover{ border-color:var(--accent); color:var(--accent-bright); }
.btn--solid{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.btn--solid:hover{ background:var(--accent-bright); border-color:var(--accent-bright); color:var(--accent-ink); filter:brightness(1.05); }

/* grain + scanline atmosphere helpers */
.grain::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9990;
  opacity:0.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* smooth anchor scrolling, only when motion is welcome */
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}
/* reduced motion respect */
@media (prefers-reduced-motion: reduce){
  :root{ --vs-anim:paused; }
  *{ animation-duration:0.001ms !important; transition-duration:0.05s !important; }
}

/* focus */
:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:3px; }