/* =============================================================================
   Bluefin Design Tokens  (Phase 2 / Workstream 1)
   -----------------------------------------------------------------------------
   The single source of truth for the design system's primitive values, exposed
   as CSS custom properties. Components (components.css) and layout (layout.css)
   reference these tokens ONLY; they never hard-code colors, spacing, or sizes.

   Naming: every token is prefixed --bf-* so it never collides with the legacy
   :root blocks in bluefin/css/hozi.main.css (--main-bg-color) or
   sandbox/css/override.main.css (--ai-*), which are left untouched during the
   Bootstrap-coexistence period.

   Brandable subset: only the four --bf-brand-* tokens are overridden per
   storefront (see the inline :root block emitted by bfBrandOverrideStyle() in
   sandbox/meta.php). Every semantic color role derives from those four, so a
   storefront recolors the whole system by overriding just the brand tokens.

   Breakpoints are NOT tokens: CSS custom properties cannot be used inside an
   @media condition in a buildless setup, so breakpoints are fixed constants in
   components/layout @media blocks and documented in docs/overhaul/conventions.md
   section 5. They align with Bootstrap 3's grid (xs <576, sm >=576, md >=768,
   lg >=992, xl >=1200) so the two systems agree while they coexist.

   No em dash (U+2014) anywhere (CI style guard).
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     Brandable subset  (per-storefront override target)
     Defaults evolve the current brand: ai-teal primary + charcoal secondary.
     --------------------------------------------------------------------------- */
  --bf-brand-primary: #00abbd;       /* ai-teal */
  --bf-brand-primary-ink: #ffffff;   /* readable text/icon on the primary color */
  --bf-brand-secondary: #231f20;     /* charcoal / near-black secondary */
  --bf-brand-accent: #ff5a3c;        /* warm coral, marketplace emphasis (price/sell). Tenant-overridable. */

  /* ---------------------------------------------------------------------------
     Semantic color roles  (derive from the brand subset + neutrals)
     --------------------------------------------------------------------------- */
  --bf-color-primary: var(--bf-brand-primary);
  --bf-color-primary-hover: #0095a4;        /* darkened teal for hover/active */
  --bf-color-primary-text: #00737f;         /* the ONLY teal that may carry text on
                                               light surfaces (5.1:1 on paper, 5.6:1
                                               on white); brand teal is 2.5-2.8:1
                                               and fails WCAG AA as text */
  --bf-color-on-primary: var(--bf-brand-primary-ink);
  --bf-color-secondary: var(--bf-brand-secondary);

  --bf-color-surface: #ffffff;              /* card / panel background */
  --bf-color-surface-alt: #f2f3f4;          /* ai-gray-lt, subtle zebra/fill */
  --bf-color-surface-sunken: #e9edee;       /* recessed wells, table heads */
  --bf-color-paper: #f7f4ee;                /* warm ivory; editorial masthead surface */

  --bf-color-text: #222222;                 /* charcoal body text */
  --bf-color-text-muted: #666666;           /* secondary/meta text */
  --bf-color-text-inverse: #ffffff;         /* text on dark surfaces */

  --bf-color-border: #d5dbdb;               /* ai-gray default border */
  --bf-color-border-strong: #b9c2c2;        /* heavier divider / input border */

  --bf-color-success: #00b26a;              /* ai-green */
  --bf-color-success-bg: #e3f7ee;
  --bf-color-warning: #c97a00;              /* contrast-safe amber */
  --bf-color-warning-bg: #fff4e0;
  --bf-color-danger: #d91e48;               /* ai-red */
  --bf-color-danger-bg: #fde7ec;
  --bf-color-info: #0071bb;                 /* ai-blue */
  --bf-color-info-bg: #e3f0fa;

  --bf-color-focus-ring: rgba(0, 171, 189, 0.45);  /* teal at 45% */
  --bf-color-success-ring: rgba(0, 178, 106, 0.45); /* btn-success "ready" glow */
  --bf-color-danger-hover: #bd1840;                 /* darkened ai-red */
  --bf-color-accent-hover: #e8472b;                 /* darkened coral accent (hover) */
  --bf-color-scrim: rgba(0, 0, 0, 0.8);            /* photo-overlay scrim for text legibility */
  --bf-color-ink-hover: #000000;                   /* hover state for ink (charcoal) surfaces */

  /* ---------------------------------------------------------------------------
     Spacing scale  (4px rhythm; px-anchored so legacy root font-size cannot rescale it)
     --------------------------------------------------------------------------- */
  --bf-space-0: 0;
  --bf-space-1: 4px;
  --bf-space-2: 8px;
  --bf-space-3: 12px;
  --bf-space-4: 16px;
  --bf-space-5: 24px;
  --bf-space-6: 32px;
  --bf-space-8: 48px;
  --bf-space-10: 64px;

  /* ---------------------------------------------------------------------------
     Typography  (Oswald display + Roboto body, loaded in sandbox/meta.php)
     --------------------------------------------------------------------------- */
  --bf-font-display: "Oswald", "Arial Narrow", sans-serif;
  --bf-font-body: "Roboto", Arial, Helvetica, sans-serif;
  --bf-font-serif: "Fraunces", Georgia, "Times New Roman", serif;

  --bf-text-xs: 12px;
  --bf-text-sm: 14px;
  --bf-text-base: 16px;
  --bf-text-lg: 18px;
  --bf-text-xl: 22px;
  --bf-text-2xl: 28px;
  --bf-text-3xl: 36px;
  --bf-text-4xl: 48px;

  --bf-leading-tight: 1.2;
  --bf-leading-normal: 1.5;
  --bf-leading-loose: 1.7;

  --bf-weight-normal: 400;
  --bf-weight-medium: 500;
  --bf-weight-bold: 700;

  /* ---------------------------------------------------------------------------
     Radius
     --------------------------------------------------------------------------- */
  --bf-radius-sm: 4px;
  --bf-radius-md: 8px;
  --bf-radius-lg: 12px;
  --bf-radius-xl: 20px;
  --bf-radius-pill: 999px;

  /* ---------------------------------------------------------------------------
     Shadow
     --------------------------------------------------------------------------- */
  --bf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --bf-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12);
  --bf-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);

  /* ---------------------------------------------------------------------------
     Z-index layers  (for NEW bf- components; the legacy navbar still uses an
     inline z-index:9999, so a new overlay that must clear it documents the
     exception until WS3 removes that inline value)
     --------------------------------------------------------------------------- */
  --bf-z-base: 1;
  --bf-z-dropdown: 1000;
  --bf-z-sticky: 1020;
  --bf-z-overlay: 1040;
  --bf-z-modal: 1050;
  --bf-z-toast: 1080;

  /* ---------------------------------------------------------------------------
     Motion
     --------------------------------------------------------------------------- */
  --bf-transition-fast: 120ms ease;
  --bf-transition-base: 200ms ease;
  --bf-transition-slow: 320ms ease;
}