/* ==========================================================================
   Global styles & design tokens
   ========================================================================== */

/* Brand display face — Reckless Neue Regular Italic */
@font-face {
  font-family: "Reckless Neue";
  src: url("/fonts/RecklessNeue-RegularItalic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  line-height: var(--line-height-normal);
  font-family: var(--font-sans);
  color: var(--color-content-primary);
  background-color: var(--color-surface-primary);
  -webkit-font-smoothing: antialiased;
}

/* Offset for fixed top nav */
main {
  padding-block-start: var(--layout-header-height);
}

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

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

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

ul,
ol {
  list-style: none;
  padding: 0;
}

/* Component display rules must not resurrect hidden elements */
[hidden] {
  display: none !important;
}

/* Image that covers its positioned parent (was next/image `fill`) */
.img-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

:root {
  /* Colors — Figma variables */
  --color-content-brand: #413399;
  --color-content-inverted: #ffffff;
  --color-content-primary: #2d2928;
  --color-content-secondary: #777170;
  --color-content-tertiary: #ec3c12;
  --color-primary-400: #8177ba;
  --color-surface-primary: #fbf6f5;
  --color-surface-secondary: #f2eeed;
  --color-surface-tertiary: #ffe6e0;
  --color-surface-inverted: #413399;
  --color-border-brand: #413399;
  --color-border-primary: #ede7e6;

  /* Typography */
  --font-sans: "Manrope", sans-serif;
  --font-display: "Reckless Neue", Georgia, serif;
  --font-nav: "Space Grotesk", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --line-height-tight: 1.25;
  --line-height-snug: 1.3;
  --line-height-normal: 1.5;

  /* Spacing — Figma Spacing/x* */
  --spacing-x1: 4px;
  --spacing-x2: 8px;
  --spacing-x3: 12px;
  --spacing-x4: 16px;
  --spacing-x5: 20px;
  --spacing-x6: 24px;
  --spacing-x8: 32px;
  --spacing-x10: 40px;
  --spacing-x15: 60px;
  --spacing-x20: 80px;
  --spacing-x25: 100px;

  /* Layout — single-row sticky header (pad + CTA) */
  --layout-header-height: 71px;

  /* Layout — Figma 1440 frame: 1360 content + 40 gutters */
  --layout-max: 1440px;
  --layout-content: 1360px;
  --layout-gutter: 40px;
  --layout-gap: 40px;
  /* Section side padding: gutter, growing to centre content past 1440 */
  --layout-padding-inline: max(
    var(--layout-gutter),
    calc((100% - var(--layout-content)) / 2)
  );

  /* Text measures */
  --measure-heading: 692px;
  --measure-body: 670px;
  --measure-column: 648px;

  /* Motion — all interaction animations use ease */
  --ease: ease;
  --duration-fast: 0.35s;
  --duration-normal: 0.45s;
  --duration-fade: 0.4s;
  --duration-slide: 0.4s;

  /* Breakpoints (custom properties can't be used in media queries):
     > 1440 content capped at 1360 and centred
     ≤ 1024 two-column layouts stack, gutter 24
     ≤ 768  single column, gutter 16, gap 24 */
}

@media (max-width: 1024px) {
  :root {
    --layout-gutter: 24px;
  }
}

@media (max-width: 768px) {
  :root {
    --layout-gutter: 16px;
    --layout-gap: 24px;
  }
}