/* Bridge Marketing — design tokens (fonts, colors, typography, spacing) */

/* ---- Webfonts ---- */
@font-face {
  font-family: "Metropolis";
  src: url("../assets/fonts/Metropolis-ExtraBold.otf") format("opentype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cookie";
  src: url("../assets/fonts/Cookie-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* ---- Brand core ---- */
  --bridge-yellow:      #FED106;
  --bridge-yellow-deep: #F5B800;
  --bridge-yellow-soft: #FFF0B0;
  --bridge-ink:         #111111;
  --bridge-ink-soft:    #2A2A2A;

  /* ---- Neutrals ---- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAFAF7;
  --neutral-100: #F2F1EC;
  --neutral-200: #E5E3DB;
  --neutral-300: #CFCCC1;
  --neutral-400: #A8A498;
  --neutral-500: #7C786C;
  --neutral-600: #565248;
  --neutral-700: #3A372F;
  --neutral-800: #24221C;
  --neutral-900: #14130F;

  /* ---- Semantic aliases ---- */
  --text-body:    var(--neutral-700);
  --border-subtle: var(--neutral-200);

  /* ---- Typography ---- */
  --font-display: "Metropolis", "Montserrat", system-ui, sans-serif;
  --font-body:    "Montserrat", system-ui, -apple-system, sans-serif;
  --font-script:  "Cookie", cursive;

  /* ---- Spacing / radius / shadow ---- */
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(20,19,15,0.06), 0 1px 1px rgba(20,19,15,0.04);
  --shadow-md: 0 6px 16px rgba(20,19,15,0.08), 0 2px 4px rgba(20,19,15,0.05);
  --shadow-yellow: 0 10px 24px rgba(254,209,6,0.45);

  --container: 1200px;
}