/* ============================================
   OUT OF THIN AIR — Design Tokens & Base
   Static site design system
   ============================================ */

/* === DESIGN TOKENS === */
:root {
  /* Colors */
  --color-cyan: #00d2d3;
  --color-green: #25D366;
  --color-dark: #0a0a0a;
  --color-card: #111;
  --color-card2: #141414;
  --color-text: #ccc;
  --color-muted: #999;
  --color-white: #fff;

  /* Fonts */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Outfit', 'Segoe UI', sans-serif;

  /* Spacing */
  --max-width: 1200px;
  --gap: 40px;
  --gap-mobile: 15px;

  /* Nav */
  --nav-bg: rgba(0,0,0,0.7);
  --nav-blur: 4px;
  --nav-padding-top: 14px;
  --nav-padding-bottom: 6px;
}

/* === RESET === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }

body {
  background: var(--color-dark);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 300;
  overflow-x: hidden;
  line-height: 1.6;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* === TYPOGRAPHY === */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-white);
  font-weight: 400;
  line-height: 1.2;
}

h1 { font-size: 52px; }
h2 { font-size: 32px; }
h3 { font-size: 22px; }

p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
}

/* === UTILITY === */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gap);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* === RESPONSIVE BASE === */
@media (max-width: 900px) {
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }
  h3 { font-size: 20px; }
  .container { padding: 0 20px; }
}

@media (max-width: 600px) {
  .container { padding: 0 var(--gap-mobile); }
}