/* ============================================================
   PXL Design Agency — Design Tokens
   Single source of truth. Imported first on every page.
   ============================================================ */

:root {
  /* Colour -------------------------------------------------- */
  --bg: #111111;
  --bg-2: #0d0d0d;
  --surface: #1a1a1a;
  --surface-2: #202020;
  --border: #2a2a2a;
  --border-2: #1f1f1f;
  --white: #ffffff;
  --muted: #888888;
  --muted-2: #5a5a5a;
  --ink: #0f0f0f;

  /* Service / brand accents */
  --blue: #5B5AFF;        /* Websites / primary CTA */
  --red: #E8453C;         /* UI/UX Design */
  --cream: #F5F0DC;       /* Product Builds */

  /* Typography --------------------------------------------- */
  --font-display: "ivypresto-headline", "Times New Roman", serif;
  --font-ui: "Inter Tight", "inter-tight", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Heading weight, leading, tracking per brief */
  --heading-weight: 600;              /* ivypresto-headline SemiBold */
  --heading-line-height: 1.15;
  --heading-letter-spacing: -0.03em;

  /* Body weight + tracking per brief */
  --body-weight: 300;                 /* Inter Tight 300 */
  --body-letter-spacing: 0.01em;

  --button-weight: 500;               /* Inter Tight 500 */

  /* Layout ------------------------------------------------- */
  --pad-x: clamp(24px, 4.5vw, 72px);
  --nav-h: 72px;
  --container-max: 1600px;
}