/*
 * Bike Fit Europe — Aero brand tokens.
 * Mirrors DESIGN.md (repo root). DESIGN.md is authoritative: change tokens
 * there first, then update this file to match.
 */

/* ---- Self-hosted fonts (no CDN — app must work offline) ---- */
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-condensed-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-condensed-700.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/manrope-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("../fonts/space-grotesk-variable.woff2") format("woff2");
}

:root {
  /* ---- Color: primary (Brand Red) ---- */
  --bfe-red-50: #fff0f0;
  --bfe-red-100: #ffd6d6;
  --bfe-red-200: #ffadad;
  --bfe-red-300: #ff7070;
  --bfe-red-400: #ff3a3a;
  --bfe-red-500: #e30200;
  --bfe-red-600: #c40000;
  --bfe-red-700: #a00000;
  --bfe-red-800: #7a0000;
  --bfe-red-900: #3d0000;

  /* ---- Color: neutral (Charcoal) ---- */
  --bfe-charcoal-50: #f5f5f5;
  --bfe-charcoal-100: #e8e8e8;
  --bfe-charcoal-200: #d1d1d1;
  --bfe-charcoal-300: #a8a8a8;
  --bfe-charcoal-400: #737373;
  --bfe-charcoal-500: #525252;
  --bfe-charcoal-600: #3d3d3d;
  --bfe-charcoal-700: #2d2d2d;
  --bfe-charcoal-800: #222221;
  --bfe-charcoal-900: #141414;

  /* ---- Color: semantic ---- */
  --bfe-surface: #ffffff;
  --bfe-surface-alt: #f9fafb;
  --bfe-on-surface: var(--bfe-charcoal-800);
  --bfe-on-dark: #ffffff;
  --bfe-border: var(--bfe-charcoal-100);
  --bfe-muted: var(--bfe-charcoal-400);

  /* ---- Color: status (data semantics only) ---- */
  --bfe-status-good: #10b981;
  --bfe-status-bad: #f43f5e;
  --bfe-status-warn: #f59e0b;
  --bfe-status-info: #0ea5e9;
  --bfe-status-good-tint: #d1fae5;
  --bfe-status-good-text: #065f46;
  --bfe-status-warn-tint: #fef3c7;
  --bfe-status-warn-text: #92400e;
  --bfe-status-bad-tint: #ffe4e6;
  --bfe-status-bad-text: #9f1239;

  /* ---- Typography ---- */
  --bfe-font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --bfe-font-body: "Manrope", -apple-system, "Segoe UI", sans-serif;
  --bfe-font-label: "Space Grotesk", "Segoe UI", monospace, sans-serif;

  /* ---- Shape ---- */
  --bfe-radius-sm: 6px;
  --bfe-radius-md: 8px;   /* controls */
  --bfe-radius-lg: 12px;  /* surfaces */
  --bfe-radius-full: 9999px;

  /* ---- Elevation ---- */
  --bfe-shadow-card: 0 4px 24px rgba(34, 34, 33, 0.08);

  /* ---- Layout ---- */
  --bfe-content-max: 1152px;
  --bfe-space-xs: 4px;
  --bfe-space-sm: 8px;
  --bfe-space-md: 16px;
  --bfe-space-lg: 32px;
  --bfe-space-xl: 64px;
  --bfe-section-y: 96px;
  --bfe-card-pad: 24px;
}