/**
 * FlareMetal design tokens
 * Change brand colors / type / spacing here first — components consume var(--fm-*).
 */
:root {
  /* Brand */
  --fm-color-brand-start: #ff6a00;
  --fm-color-brand-end: #ee0979;
  --fm-gradient-brand: linear-gradient(
    90deg,
    var(--fm-color-brand-start),
    var(--fm-color-brand-end)
  );
  --fm-gradient-panel: linear-gradient(to right, #2c3e50, #5a7689);
  --fm-color-hero-bg: #2a6f97;

  /* Neutrals */
  --fm-color-bg: #f0f0f0;
  --fm-color-surface: #ffffff;
  --fm-color-panel: #e0e0e0;
  --fm-color-panel-dark: #333333;
  --fm-color-text: #333333;
  --fm-color-text-muted: #4e4e4e;
  --fm-color-text-inverse: #ffffff;
  --fm-color-border: #cccccc;
  --fm-color-nav-scrolled: #f0f0f0;

  /* Typography — Barlow ≈ DIN Next; Noto Sans TC for 繁中 */
  --fm-font-sans: "Barlow", "Noto Sans TC", system-ui, -apple-system, "Segoe UI",
    "Microsoft JhengHei", "PingFang TC", sans-serif;
  --fm-font-weight-light: 300;
  --fm-font-weight-regular: 400;
  --fm-font-weight-medium: 500;
  --fm-font-weight-bold: 700;
  /* Prefer 800 over 900: fewer deformation artifacts at mid sizes */
  --fm-font-weight-black: 800;

  /* Spacing */
  --fm-space-1: 0.25rem;
  --fm-space-2: 0.5rem;
  --fm-space-3: 1rem;
  --fm-space-4: 1.5rem;
  --fm-space-5: 2rem;
  --fm-space-6: 3rem;
  --fm-space-section: 100px;
  --fm-page-hero-pt: 150px;

  /* Layout */
  --fm-container-max: 1600px;
  --fm-radius-pill: 50px;
  --fm-radius-card: 0.5rem;
  --fm-nav-z: 50;
  --fm-overlay-z: 99;

  /* Motion */
  --fm-transition-fast: 0.3s ease;
}