/* =============================================================
   FONT FACE DECLARATIONS
   ============================================================= */

/* Syne */
@font-face {
  font-family: 'Syne';
  src: url('../assets/fonts/Syne-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Syne';
  src: url('../assets/fonts/Syne-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Syne';
  src: url('../assets/fonts/Syne-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Syne';
  src: url('../assets/fonts/Syne-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Syne';
  src: url('../assets/fonts/Syne-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Satoshi */
@font-face {
  font-family: 'Satoshi';
  src: url('../assets/fonts/Satoshi-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../assets/fonts/Satoshi-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../assets/fonts/Satoshi-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../assets/fonts/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../assets/fonts/Satoshi-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* =============================================================
   DESIGN TOKENS
   ============================================================= */

:root {
  /* Colors */
  --color-bg: #F5F2ED;
  --color-surface: #EDEAE4;
  --color-border: #D8D4CC;
  --color-text: #0A0A0A;
  --color-text-muted: #6B6B6B;
  --color-accent: #C04C1A;
  --color-accent-hover: #E05520;

  /* Typography */
  --font-display: 'Syne', sans-serif;
  --font-body: 'Satoshi', sans-serif;

  /* Spacing — 8pt system */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;
  --space-16: 128px;

  /* Layout */
  --max-width: 1280px;
  --nav-height: 56px;
}

/* =============================================================
   CSS RESET
   ============================================================= */

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

/* =============================================================
   BASE STYLES
   ============================================================= */

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
}

/* =============================================================
   Component styles → see styles/components.css
   ============================================================= */