/* =============================================================================
   AdStar landing — base.css
   Design tokens (from Figma variables), font faces, reset, base typography.
   ========================================================================== */

/* ---- Inter (self-hosted, latin subset) ---------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/inter-latin-800-normal.woff2") format("woff2");
}

/* ---- Design tokens ------------------------------------------------------- */
:root {
  /* Brand (lime) */
  --brand-500: #e0fc31;
  --brand-600: #dafb09; /* primary brand */
  --brand-700: #c3e203;
  --brand-800: #a1ba03;
  --brand-900: #7e9202;

  /* Neutrals */
  --black: #000000;
  --white: #ffffff;
  --gray-900: #1a1a1a;
  --gray-800: #242424;
  --gray-775: #2b2b2b;
  --gray-750: #383838;
  --gray-700: #4d4d4d;
  --gray-600: #5d5d5d;
  --gray-500: #808080;
  --gray-400: #999999;
  --gray-300: #b3b3b3;
  --gray-200: #cccccc;
  --gray-100: #e6e6e6;
  --gray-25:  #f9f9f9;

  /* Semantic */
  --bg:            var(--black);
  --bg-elevated:   var(--gray-900);
  --bg-card:       var(--gray-800);
  --text-primary:  var(--gray-25);
  --text-secondary:var(--gray-400);
  --text-muted:    var(--gray-500);
  --border:        var(--gray-800);
  --border-strong: var(--gray-750);

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Type scale (size / line-height) */
  --fs-display-lg: 48px;  --lh-display-lg: 60px;  /* hero / section titles */
  --fs-display-sm: 30px;  --lh-display-sm: 38px;
  --fs-display-xs: 24px;  --lh-display-xs: 32px;
  --fs-xl: 20px;          --lh-xl: 30px;
  --fs-lg: 18px;          --lh-lg: 28px;
  --fs-md: 16px;          --lh-md: 24px;
  --fs-sm: 14px;          --lh-sm: 20px;
  --fs-xs: 12px;          --lh-xs: 18px;
  --tracking-display: -0.02em;

  /* Layout */
  --content-max: 1200px;
  --gutter: 24px;          /* desktop side padding inside content */
  --gutter-mobile: 20px;

  /* Effects */
  --shadow-xs: 0 1px 2px rgba(10, 13, 18, 0.05);
  --shadow-pop: 0 24px 60px rgba(0, 0, 0, 0.55);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Nav */
  --nav-h: 100px;
  --nav-h-mobile: 60px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.18s;
  --dur: 0.32s;
  --dur-slow: 0.6s;
}

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

html, body { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: auto; /* GSAP ScrollSmoother owns scrolling; native disabled */
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-md);
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; }

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

/* Respect reduced-motion: components also check this in JS */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---- Typography helpers -------------------------------------------------- */
.display-lg { font-size: var(--fs-display-lg); line-height: var(--lh-display-lg); font-weight: 700; letter-spacing: var(--tracking-display); }
.display-sm { font-size: var(--fs-display-sm); line-height: var(--lh-display-sm); font-weight: 400; }
.display-xs { font-size: var(--fs-display-xs); line-height: var(--lh-display-xs); font-weight: 600; }
.text-xl { font-size: var(--fs-xl); line-height: var(--lh-xl); }
.text-lg { font-size: var(--fs-lg); line-height: var(--lh-lg); }
.text-sm { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.text-xs { font-size: var(--fs-xs); line-height: var(--lh-xs); }

.text-secondary { color: var(--text-secondary); }
.text-brand { color: var(--brand-600); }