/* 4stay type — three families, distinct roles
   Poppins  → display + brand voice (local TTF, self-hosted from /public/fonts)
   Roboto   → body, UI, buttons, inputs (Google)
   Inter    → dense data, captions, prices (Google)

   Self-hosted Poppins replaces the former Google-CDN @import in the Rails
   layouts. Material Symbols is intentionally omitted — the app renders icons
   via @mui/icons-material (SVG), not the icon font. */

/* Roboto + Inter from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Inter:wght@400;500;600;700&display=swap');

/* ───────── Poppins (local, self-hosted) ───────── */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 100; font-display: swap; src: url('/fonts/Poppins-Thin.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 100; font-display: swap; src: url('/fonts/Poppins-ThinItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 200; font-display: swap; src: url('/fonts/Poppins-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 200; font-display: swap; src: url('/fonts/Poppins-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/Poppins-Light.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 300; font-display: swap; src: url('/fonts/Poppins-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/Poppins-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 500; font-display: swap; src: url('/fonts/Poppins-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 600; font-display: swap; src: url('/fonts/Poppins-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/Poppins-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 700; font-display: swap; src: url('/fonts/Poppins-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/Poppins-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 800; font-display: swap; src: url('/fonts/Poppins-ExtraBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url('/fonts/Poppins-Black.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 900; font-display: swap; src: url('/fonts/Poppins-BlackItalic.ttf') format('truetype'); }

/* ───────── Role-based defaults ───────── */
:root {
  --fs-font-display: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --fs-font-body:    'Roboto',  system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --fs-font-caption: 'Inter',   system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Body, UI, buttons, inputs → Roboto */
html, body, button, input, select, textarea {
  font-family: var(--fs-font-body);
}

/* Display → Poppins. Marketing headlines also opt in via .display */
h1, h2, h3, h4, h5, h6, .display {
  font-family: var(--fs-font-display);
}

/* Numeric / dense data → Inter (opt-in via .num or [data-num]) */
.num, [data-num], .price, .rating-num, .stat {
  font-family: var(--fs-font-caption);
  font-variant-numeric: tabular-nums;
}