/* =====================================================
   APEX IP — main.css
   Global tokens, reset, base typography & shared layout
   Base canvas: 1920px · Inter Tight · #F65433
   ===================================================== */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700&display=swap');

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

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

/* ---------- Design tokens ---------- */
:root {
  /* Colors */
  --apx-orange:    #F65433;
  --apx-dark:      #0D0D0D;
  --apx-white:     #FFFFFF;

  /* Typography */
  --apx-font:      'Inter Tight', sans-serif;

  /* Layout */
  --apx-canvas:    1920px;   /* Figma base canvas width */
  --apx-pad-x:     320px;    /* horizontal page padding (left & right) */

  /* Radii & shadows */
  --apx-radius-pill: 24px;
  --apx-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* ---------- Base ---------- */
html, body {
  font-family: var(--apx-font);
  background: var(--apx-dark);
  color: var(--apx-white);
  width: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Shared layout helpers ---------- */

/* Page container: 1920px canvas, 320px side padding (Figma) */
.apx-container {
  width: 100%;
  max-width: var(--apx-canvas);
  margin: 0 auto;
  padding-left: var(--apx-pad-x);
  padding-right: var(--apx-pad-x);
}

/* Section wrapper: vertical rhythm baseline (override per section) */
.apx-section {
  position: relative;
  width: 100%;
}

/* =====================================================
   RESPONSIVE — base breakpoints
   The horizontal page padding is the main lever:
   sections inherit it via var(--apx-pad-x).
   ===================================================== */

/* Laptop (≤ 1440px) */
@media (max-width: 1440px) {
  :root {
    --apx-pad-x: 80px;
  }
}

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
  :root {
    --apx-pad-x: 40px;
  }
}

/* Mobile (≤ 640px) */
@media (max-width: 640px) {
  :root {
    --apx-pad-x: 20px;
  }
}