/* =========================
   FONT FACES (PROJECT FONTS)
   ========================= */
@font-face {
  font-family: Inter;
  src: url("../assets/fonts/Inter-Regular.ttf");
  font-weight: 400;
}
@font-face {
  font-family: Inter;
  src: url("../assets/fonts/Inter-Medium.ttf");
  font-weight: 500;
}
@font-face {
  font-family: Inter;
  src: url("../assets/fonts/Inter-Bold.ttf");
  font-weight: 700;
}
@font-face {
  font-family: Montserrat;
  src: url("../assets/fonts/Montserrat-Bold.ttf");
  font-weight: 700;
}

/* =========================
   DESIGN TOKENS
   ========================= */
:root {
  /* Colors */
  --color-bg-app: #ffffff;
  --color-bg-card: #ffffff;
  --color-text-primary: #111;
  --color-text-secondary: #666;
  --color-text-muted: #444;
  --color-border-light: #e6e6e6;
  --color-divider: #eee;

  --color-brand-primary: #6b3cff;
  --color-cta-primary: #4285f4;
  --color-rating-star: #f4b400;

  /* Typography */
  --font-primary: Inter, system-ui, -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-accent: Montserrat, Inter, system-ui, sans-serif;

  --font-size-h1: 22px;
  --font-size-body: 14px;
  --font-size-input: 15px;
  --font-size-button: 16px;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 28px;
  --space-xl: 32px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 16px;

  /* Shadows */
  --shadow-card: 0 12px 30px rgba(0,0,0,0.08);

  /* Heights */
  --height-control: 52px;
}