/* ==========================================================================
   BIXYN — Design Tokens
   Values extracted directly from the Figma file (single source of truth).
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- Colors */
  --color-bg: #131506;            /* Page background (dark) */
  --color-bg-alt: #1B1D0C;        /* Alt section background (Portfolio/FAQ) */
  --color-accent: #B3F74A;        /* Primary accent green */
  --color-accent-dark: #121F00;   /* Text on accent surfaces */
  --color-olive: #648537;         /* Process numbers */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-hover-button: #96D535;
  --color-bg-black: #101204;

  --color-text: #FFFFFF;          /* Default text */
  --color-text-muted: #c2c2c2;    /* Muted body copy */
  --color-text-soft: #343624;     /* CTA subtext */
  --color-text-faq: #424936;      /* FAQ answer copy */
  --color-white-70: rgba(255, 255, 255, 0.7);

  --color-border: #4249364d;   /* Card / divider strokes */
  --color-border-soft: #4249361a;
  --color-navbar-bg: #131506cc; /* Navbar (with blur) */

  /* --------------------------------------------------------- Typography */
  --font-heading: 'Syne', sans-serif;
  --font-body: 'Poppins', sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Heading sizes — Desktop */
  --fs-h1: 80px;      --lh-h1: 80px;
  --fs-h2: 48px;      --lh-h2: 64px;
  --fs-h3: 26px;      --lh-h3: 38.4px;

  /* Body / labels */
  --fs-body: 16px;    --lh-body: 28px;
  --fs-body-sm: 14px; --lh-body-sm: 24px;
  --fs-label: 14px;   --lh-label: 14px;   /* eyebrow labels */
  --fs-stat: 48px;    --lh-stat: 52.8px;  /* stat numbers */

  --ls-label: 0.1em; /* eyebrow letter-spacing */

  /* ------------------------------------------------------------- Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;

  /* Section horizontal padding (per breakpoint) */
  --page-padding: 120px;

  /* Layout */
  --container-max: 1200px;
  --radius: 4px;
  --radius-lg: 8px;

  --navbar-height: 80px;
}

/* Tablet tokens */
@media (max-width: 1024px) {
  :root {
    --page-padding: 32px;
    --navbar-height: 80px;
  }
}

/* Mobile tokens */
@media (max-width: 640px) {
  :root {
    --fs-h1: 32px;      --lh-h1: 40px;
    --fs-h2: 24px;      --lh-h2: 32px;
    --fs-h3: 20px;      --lh-h3: 33.6px;
    --fs-body: 14px;    --lh-body: 24px;
    --fs-stat: 40px;    --lh-stat: 52.8px;
    --page-padding: 20px;
    --navbar-height: 59px;
  }
}