/* ==========================================================================
   KAMPAI MONTRÉAL — DESIGN SYSTEM VARIABLES & FONTS
   ========================================================================== */

/* Font Face Declarations */
@font-face {
  font-family: 'Gerbox';
  src: url('../public/fonts/Gerbox.woff2') format('woff2'),
       url('../public/fonts/Gerbox.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: 'Futura';
  src: url('../public/fonts/Futura-MediumItalic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

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

@font-face {
  font-family: 'Futura Condensed';
  src: url('../public/fonts/Futura-CondensedMedium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Futura Condensed';
  src: url('../public/fonts/Futura-CondensedExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Designer Color Tokens */
  --color-navy: #0E2340;
  --color-navy-dark: #071324;
  --color-navy-light: #1A365D;
  --color-red: #E52421;
  --color-red-dark: #B81815;
  --color-teal: #009BA4;
  --color-teal-dark: #00767D;
  --color-gold: #F5B813;
  --color-gold-light: #FCD566;
  --color-paper: #F6EEDF;
  --color-paper-light: #FAF6EE;
  --color-paper-dark: #E6D9C3;
  --color-text-dark: #1E232A;
  --color-text-muted: #4A5568;
  --color-white: #FFFFFF;

  /* Typography */
  --font-heading: 'Gerbox', 'Impact', sans-serif;
  --font-body: 'Futura', system-ui, -apple-system, sans-serif;
  --font-condensed: 'Futura Condensed', 'Futura', sans-serif;

  /* Elevation & Shadows */
  --shadow-sm: 0 2px 8px rgba(14, 35, 64, 0.08);
  --shadow-md: 0 6px 20px rgba(14, 35, 64, 0.12);
  --shadow-lg: 0 12px 36px rgba(14, 35, 64, 0.18);
  --shadow-gold: 0 8px 24px rgba(245, 184, 19, 0.35);

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --container-max-width: 1200px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
}