/**
 * Bonfire Design System 1.0 — tokens pulled from Figma variables + text styles.
 * File: https://www.figma.com/design/eUJmwc3mNhom7WPuvpqKIW/Bonfire-Design-System-1.0
 *
 * Pages located via MCP metadata:
 * - Cover:           node 0:1
 * - UI Elements:     node 1:5  (buttons, forms, headers/nav, newsfeed patterns, separators)
 * - Icons:           node 1:6  (master icon grid frame 5:11780; community menu icons, nav, payments)
 *
 * Component sets (library search / instances on UI Elements):
 * - Icons (set):     search_design_system "Icons" → Bonfire Design System 1.0
 * - Avatars (set):   search_design_system "avatar" → "Avatars" in Bonfire Design System 1.0
 *
 * Illustrations: no separate top-level page in the canvases above; decorative / one-off vectors
 * appear on the Icons canvas (e.g. hidden utility artwork). Use empty-state art from app frames
 * or export from the specific marketing / onboarding files when needed.
 *
 * Variable snapshots use get_variable_defs(fileKey, nodeId) on section frames; values match
 * collection "Bonfire Colors" / "App" where referenced in Figma.
 */

:root {
  /* —— Core colors (align with community-screen.css; DS names mirrored) —— */
  --ds-text-primary: #1c1917;
  --ds-text-secondary: #6e6b68;
  --ds-icon-primary: #1c1917;
  --ds-icon-black: #1c1917;
  --ds-icon-secondary: #b5b2b0;
  --ds-surface: #ffffff;
  --ds-always-white: #ffffff;
  --ds-bg-base: #f8f7f6;
  --ds-light-gray: #e9e5e2;
  --ds-lightest-gray: #efedeb;
  --ds-medium-gray: #ceccca;
  --ds-cypress: #027471;
  --ds-cypress-dark: #024644;
  --ds-cypress-13: #07b4af21;
  --ds-cypress-20: #07b4af33;
  --ds-cypress-50: #07b4af80;
  --ds-indigo-stroke: #6154f2;
  --ds-indigo-dark: #2b2289;
  --ds-indigo-20: #6154f233;
  --ds-ocean: #5192ed;
  --ds-ocean-20: #5192ed33;
  /* Brand / accent (from Buttons area variables; use where Figma uses Bonfire orange) */
  --ds-bonfire-solid: #ff5f45;
  --ds-ios-black: #000000;
  --ds-dark: #141b34;
  --ds-white-pure: #ffffff;

  /* —— Borders & effects —— */
  --ds-border-primary: #d5d7da;
  --ds-shadow-xs: #0a0d120d;
  --ds-shadow-skeuomorphic-inner: #0a0d120d;
  --ds-shadow-skeuomorphic-inner-border: #0a0d122e;

  /* —— Spacing scale (Figma variables: spacing-*) —— */
  --ds-space-xxs: 2px;
  --ds-space-xs: 4px;
  --ds-space-sm: 6px;
  --ds-space-md: 8px;
  --ds-space-lg: 12px;
  --ds-space-xl: 16px;
  /* Inset hairlines between stacked rows in cards/menus (matches 16px horizontal content padding) */
  --bf-menu-hairline-inset: 16px;

  /* —— Radius —— */
  --ds-radius-md: 8px;

  /* —— Payment / card brand (Icons page variables) —— */
  --ds-mastercard-orange: #ff5f00;
  --ds-mastercard-red: #eb001b;
  --ds-mastercard-yellow: #f79e1b;

  /* —— Typography stacks (Body/Tiny uses Inter in DS) —— */
  --ds-font-sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ds-font-tiny: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Text styles from Figma (published styles in Bonfire Design System 1.0) — use with font shorthand or separate props */
  /* Heading/Md:    Figtree Bold 22 / 1.1 */
  /* Heading/Sm:    Figtree SemiBold 18 / 1.1 */
  /* Body/Lg - Semibold: Figtree SemiBold 16 / 20 */
  /* Body/Lg - Bold:       Figtree SemiBold 16 / 20 (named Bold in Figma) */
  /* Body/Lg - Medium:   Figtree Medium 16 / 20 */
  /* Body/Lg - Regular:  Figtree Regular 16 / 20 */
  /* Body/Md - Semibold: Figtree SemiBold 14 / 18 */
  /* Body/Md - Bold:     Figtree SemiBold 14 / 18 */
  /* Body/Md - Medium:   Figtree Medium 14 / 18 */
  /* Body/Md - Regular:  Figtree Regular 14 / 18 */
  /* Body/Sm - Semibold: Figtree SemiBold 13 / 16 */
  /* Body/Sm - Regular:  Figtree Regular 13 / 16 */
  /* Body/Tiny - Semibold: Figtree SemiBold 12 / 13 */
  /* Body/Tiny - Regular:  Inter Regular 11 / 14 */
}

/* Optional utility classes — app uses Figtree Regular 400 + Semibold 600 only */
.ds-heading-md {
  font-family: var(--ds-font-sans);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--ds-text-primary);
}

.ds-heading-sm {
  font-family: var(--ds-font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--ds-text-primary);
}

.ds-body-lg-semibold {
  font-family: var(--ds-font-sans);
  font-weight: 600;
  font-size: 17px;
  line-height: 21px;
  letter-spacing: 0;
}

.ds-body-md-regular {
  font-family: var(--ds-font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0;
}

.ds-body-sm-regular {
  font-family: var(--ds-font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0;
}

.ds-body-tiny-regular {
  font-family: var(--ds-font-tiny);
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 0;
  color: var(--ds-text-secondary);
}