/* Audi · IARO design system — tokens used by this page */
@font-face {
  font-family: "Audi Type";
  src: url("../fonts/AudiTypeVF_Lat.woff2") format("woff2-variations"),
       url("../fonts/AudiTypeVF_Lat.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 100% 130%;
  font-style: normal;
  font-display: swap;
}

:root {
  --canvas: #ffffff;
  --surface: #f2f2f2;
  --surface-strong: #e5e5e5;
  --ink: #000000;
  --ink-secondary: #333333;
  --ink-muted: #666666;
  --line: #d9d9d9;
  --line-strong: #000000;
  --focus-ring: #000000;
  --on-ink: #ffffff;
  --block-black: #000000;
  --on-block: #ffffff;
  --on-block-muted: #b3b3b3;
  --grey-30: #4c4c4c;
  --signal-red: #eb0d3f;

  --font-sans: "Audi Type", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --space-24: 96px; --space-30: 120px;

  --border-hairline: 1px;
  --border-emphasis: 2px;
  --content-max: 1280px;
  --prose-max: 704px;
  --nav-height: 64px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #000000;
    --surface: #1a1a1a;
    --surface-strong: #333333;
    --ink: #ffffff;
    --ink-secondary: #e5e5e5;
    --ink-muted: #b3b3b3;
    --line: #333333;
    --line-strong: #ffffff;
    --focus-ring: #ffffff;
    --on-ink: #000000;
    --signal-red: #fd2c4e;
    color-scheme: dark;
  }
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  background: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

main { flex: 1; }

.extended { font-variation-settings: "wdth" 130; font-weight: 400; }

.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: max(var(--space-4), env(safe-area-inset-left));
  padding-right: max(var(--space-4), env(safe-area-inset-right));
}
@media (min-width: 640px) {
  .wrap { padding-left: var(--space-8); padding-right: var(--space-8); }
}

:where(a, button, input, select, iframe):focus-visible {
  outline: var(--border-emphasis) solid var(--focus-ring);
  outline-offset: 2px;
}

/* Logo */
.logo { display: block; width: 72px; height: auto; color: var(--ink); }
.logo-sm { width: 64px; color: var(--ink-muted); }

/* TopBar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: var(--nav-height);
  padding: env(safe-area-inset-top) max(var(--space-4), env(safe-area-inset-right)) 0 max(var(--space-4), env(safe-area-inset-left));
  background: var(--canvas);
  border-bottom: var(--border-hairline) solid var(--line);
}
@media (min-width: 640px) {
  .topbar { padding-left: var(--space-8); padding-right: var(--space-8); }
}
.topbar-brand { display: inline-flex; padding: var(--space-2) 0; }
.topbar-right { display: flex; align-items: center; gap: var(--space-4); margin: 0; }
.topbar-user { font-size: 14px; color: var(--ink-muted); }
@media (max-width: 480px) { .topbar-user { display: none; } }

/* Buttons */
.btn {
  font: inherit;
  font-size: 15px;
  height: 40px;
  padding: 0 var(--space-6);
  border-radius: 0;
  border: var(--border-hairline) solid var(--line-strong);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.btn-primary { background: var(--ink); color: var(--on-ink); }
.btn-primary:hover { background: var(--ink-secondary); border-color: var(--ink-secondary); }
.btn-secondary { background: var(--canvas); color: var(--ink); }
.btn-secondary:hover { background: var(--surface-strong); }
.btn-sm { height: 32px; padding: 0 var(--space-4); font-size: 14px; }
.btn-block { width: 100%; height: 48px; }

/* Fields */
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; font-weight: 700; color: var(--ink); }
.hint { margin: 0; font-size: 12px; color: var(--ink-muted); }
.input, .select {
  font: inherit;
  font-size: 16px;
  height: 48px;
  width: 100%;
  padding: 0 var(--space-3);
  border: var(--border-hairline) solid var(--line-strong);
  border-radius: 0;
  background: var(--canvas);
  color: var(--ink);
}
.select {
  min-width: 260px;
  padding-right: var(--space-12);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: right 20px center, right 14px center;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

/* Login */
.login {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: var(--space-16) var(--space-4) var(--space-24);
  display: grid;
  gap: var(--space-8);
  align-content: start;
}
@media (min-width: 640px) { .login { padding-top: var(--space-30); } }
.login-block h1 { margin: 0; font-size: 48px; line-height: 1.1; letter-spacing: -0.01em; }
.login-sub { margin: var(--space-3) 0 0; color: var(--ink-muted); font-size: 18px; }
.login-form {
  display: grid;
  gap: var(--space-6);
  border-top: var(--border-hairline) solid var(--line-strong);
  padding-top: var(--space-8);
}
.alert {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  border: var(--border-hairline) solid var(--signal-red);
}
.alert svg { color: var(--signal-red); flex: none; }

/* Hero */
.hero {
  background: var(--block-black);
  color: var(--on-block);
  border-bottom: var(--border-hairline) solid var(--line);
  padding: var(--space-16) 0 var(--space-12);
}
@media (min-width: 640px) { .hero { padding-top: var(--space-24); } }
.hero-eyebrow { margin: 0; font-size: 14px; color: var(--on-block-muted); }
.hero h1 {
  margin: var(--space-6) 0 0;
  font-size: clamp(40px, 7vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.hero-sub { margin: var(--space-4) 0 0; font-size: 18px; color: var(--on-block-muted); max-width: var(--prose-max); }

/* ControlBar */
.controls {
  background: var(--surface);
  border-bottom: var(--border-hairline) solid var(--line);
  margin: 0;
}
.controls-in {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4) var(--space-6);
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}
@media (max-width: 640px) {
  .controls-in .field, .select { width: 100%; min-width: 0; }
}

/* Video */
.video-section { padding-top: var(--space-12); padding-bottom: var(--space-24); }
.player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--block-black);
  border: var(--border-hairline) solid var(--line);
}
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.caption { margin: var(--space-3) 0 0; font-size: 12px; color: var(--ink-muted); }

/* Footer */
.footer {
  border-top: var(--border-hairline) solid var(--line);
  padding: var(--space-6) 0 max(var(--space-6), env(safe-area-inset-bottom));
}
.footer-in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font-size: 12px; color: var(--ink-muted); }