/* ============================================================
   FASTLANE STUDIOS — DESIGN TOKENS
   Source of truth for all colour, type, spacing, and motion values.
   Never hardcode hex values, font names, or pixel values outside this file.
   ============================================================ */

@font-face {
  font-family: "Aeonik";
  src: url("fonts/Aeonik-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("fonts/Aeonik-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("fonts/Aeonik-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  /* ── Colour ── */
  --color-black: #000000;
  --color-gun-metal: #343434;
  --color-silver-grey: #848086;
  --color-off-white: #F3F3F3;
  --color-white: #FFFFFF;
  --color-whipped-yellow: #FAECDB;
  --color-diner-red: #CC2642;
  --color-burnt-red: #5C1016;

  --color-bg-primary: var(--color-black);
  --color-bg-surface: var(--color-gun-metal);
  --color-text-heading: var(--color-white);
  --color-text-body: var(--color-off-white);
  --color-text-muted: var(--color-silver-grey);
  --color-accent: var(--color-diner-red);
  --color-accent-hover: var(--color-burnt-red);
  --color-border: rgba(243, 243, 243, 0.12);
  --color-border-strong: rgba(243, 243, 243, 0.24);

  /* ── Typography ── */
  --font-primary: dharma-gothic-e, sans-serif;   /* display headlines, always uppercase */
  --font-secondary: tachyon, sans-serif;         /* UI labels, nav, eyebrows, always uppercase */
  --font-accent: "Aeonik", sans-serif;           /* editorial accent moments, set light */
  --font-body: "Aeonik", sans-serif;             /* all body copy */

  --weight-light: 300;
  --weight-regular: 400;
  --weight-bold: 700;

  --size-display-xl: clamp(72px, 11vw, 200px);
  --size-display-lg: clamp(52px, 7vw, 120px);
  --size-display-md: clamp(36px, 4.5vw, 64px);
  --size-heading: clamp(24px, 2.4vw, 36px);
  --size-eyebrow: 12px;
  --size-nav: 13px;
  --size-body-lg: 18px;
  --size-body: 15px;
  --size-body-sm: 13px;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-widest: 0.18em;

  --leading-display: 0.92;
  --leading-heading: 1.05;
  --leading-body: 1.7;

  /* ── Spacing (8px scale) ── */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;
  --space-9: 160px;

  --gutter-desktop: 64px;
  --gutter-mobile: 24px;

  /* ── Layout ── */
  --radius-none: 0px;
  --radius-sm: 4px;
  --max-width: 1600px;
  --nav-height: 88px;

  /* ── Shadow ── */
  --shadow-elevated: 0 24px 64px rgba(0, 0, 0, 0.5);
  --shadow-focus: 0 0 0 2px var(--color-accent);

  /* ── Motion ── */
  --ease-accelerate: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.3s;
  --duration-base: 0.6s;
  --duration-slow: 0.9s;
}