/* ================================
   FONTS — Neue Montreal (body) + Clash Display (display).
   Files live in assets/images/ alongside the rest of the design assets.
   ================================ */

@font-face {
  font-family: 'Neue Montreal';
  src: url('../assets/images/NeueMontreal-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Montreal';
  src: url('../assets/images/NeueMontreal-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Montreal';
  src: url('../assets/images/NeueMontreal-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Montreal';
  src: url('../assets/images/NeueMontreal-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Clash Display';
  src: url('../assets/images/ClashDisplay-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../assets/images/ClashDisplay-Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../assets/images/ClashDisplay-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../assets/images/ClashDisplay-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ================================
   DESIGN TOKENS — exact values pulled from Figma file Sensor Studio (220:465 Home Design)
   File: https://www.figma.com/design/EBgaBFo4GXMmfIysZVXPLU/Sensor-Studio
   ================================ */

:root {
  /* Figma design canvas width — every pixel value in the design is anchored to this. Use the
     --fig() helper pattern below (e.g. calc(60 / 1728 * 100vw)) so the design scales fluidly. */
  --fig-width: 1728;

  /* Colors (Figma variables) */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-line: rgba(0, 0, 0, 0.15);         /* Figma var "Black 15%" */
  --color-text-muted: rgba(0, 0, 0, 0.55);

  /* Typography (Figma text styles) */
  --display-font: 'Clash Display', 'Helvetica Neue', sans-serif;
  --body-font: 'Neue Montreal', 'PP Neue Montreal', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --max-width: 1608px;                       /* Figma container width (canvas 1728 minus 60px padding ×2) */
  --pad: 60px;                               /* Figma container horizontal padding */

  /* Border radii (from Figma) */
  --radius-card: 95px;                       /* Project Brief modal card */
  --radius-projects: 120px;                  /* Projects image frame */
  --radius-button-pill: 40px;                /* Primary button */
  --radius-button-sq: 32px;                  /* Projects prev/next buttons */
  --radius-checkbox: 4px;

  /* Transitions */
  --t-fast: 0.2s ease;
  --t-base: 0.3s ease;
  --t-slow: 0.8s ease;

  /* Z-index scale */
  --z-nav: 100;
  --z-modal: 200;
}