/* Skytop Aero design tokens, built from design/tokens.json (light theme).
   Shared by every page; the banner prototypes only add their own files. */

:root {
  /* Pantone brand set */
  --green-5535: #183129;
  --orange-158: #e87824;
  --orange-1375: #fe9e1f;
  --yellow-7548: #fcc504;
  --pantone-black: #000000;
  --pantone-white: #ffffff;

  /* Semantic colors */
  --surface: #ffffff;
  --surface-raised: #f7f4ee;
  --surface-inverse: var(--green-5535);
  --surface-deep: #0f1f19;          /* the dark-theme surface, used here as a deeper green */
  --ink: var(--green-5535);
  --ink-muted: #5a6b64;
  --ink-inverse: #ffffff;
  --hairline: #d9d4c8;
  --accent: var(--green-5535);
  --on-accent: #ffffff;
  --highlight: var(--yellow-7548);
  --on-highlight: var(--green-5535);
  --focus-ring: var(--accent);

  /* Type */
  --font-display: Montserrat, "Gotham", "Helvetica Neue", Arial, sans-serif;
  --font-sans: Montserrat, "Helvetica Neue", Arial, sans-serif;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-10: 40px;
  --space-16: 64px;

  /* Radius */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-round: 9999px;

  --max-width: 1180px;
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

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

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.eyebrow {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* Buttons: radius-sm, no shadows */
.btn {
  display: inline-block;
  padding: 12px var(--space-6);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font: 600 15px/20px var(--font-sans);
  text-decoration: none;
  cursor: pointer;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: #0f1f19; }
.btn-highlight { background: var(--highlight); color: var(--on-highlight); }
.btn-highlight:hover { background: var(--orange-1375); }
.btn-ghost-light { border-color: var(--pantone-white); color: var(--pantone-white); }
.btn-ghost-light:hover { background: var(--pantone-white); color: var(--green-5535); }
.btn-ghost-dark { border-color: var(--green-5535); color: var(--green-5535); }
.btn-ghost-dark:hover { background: var(--green-5535); color: var(--pantone-white); }

/* On dark grounds the focus ring switches to white so it stays visible */
.on-dark :focus-visible { outline-color: var(--pantone-white); }

/* Logo on a white plate. Clear space = height of the AERO line,
   which is about 7.5% of the logo's width. */
.logo-plate {
  --logo-w: 200px;
  display: inline-block;
  margin: 0;
  padding: calc(var(--logo-w) * 0.075);
  background: var(--pantone-white);
  border-radius: var(--radius-none);
  line-height: 0;
}
.logo-plate img { width: var(--logo-w); height: auto; }
@media (max-width: 600px) {
  .logo-plate { --logo-w: 150px; }
}