/* =============================================================================
   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: the --bf-brand-* tokens are overridden per storefront (see
   the inline :root block emitted by bfBrandOverrideStyle() in sandbox/meta.php).
   In practice a storefront configures only primary + secondary (STORE_PRIMARY_COLOR
   / STORE_SECONDARY_COLOR); the accent DEFAULTS to a shade derived from the primary
   so it always matches the configured brand, and a site may still override it with a
   hex via BF_BRAND_ACCENT. Every semantic color role derives from these, 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: color-mix(in srgb, var(--bf-brand-primary) 72%, #000);
                                     /* marketplace emphasis (price/sell): a deeper shade of the
                                        CONFIGURED primary, so it matches every storefront's brand
                                        instead of a baked-in coral. Overridable via BF_BRAND_ACCENT. */

  /* ---------------------------------------------------------------------------
     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: color-mix(in srgb, var(--bf-brand-accent) 82%, #000);  /* darkened 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  (Open Market: Bricolage Grotesque display + Inter body; Fraunces
     serif kept defined but retired as the heading default. All loaded in sandbox/meta.php)
     --------------------------------------------------------------------------- */
  --bf-font-display: "Bricolage Grotesque", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bf-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, 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  (the raw ramp; for a HOVER LIFT use the --bf-elev-* pairs below,
     never these directly, so rest and hover stay in step)
     --------------------------------------------------------------------------- */
  --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

     Duration and easing are separate tokens. They used to be welded together in
     the --bf-transition-* trio, which meant a rule that wanted 200ms with any
     other curve could not say so and had to drop to a raw value. That is how the
     system ended up with eight durations (five of them hand-typed) and, because
     nobody could name a curve, exactly one easing: the browser default.

     There is ONE curve. Do not introduce a second without a reason that survives
     being said out loud.
     --------------------------------------------------------------------------- */
  --bf-ease: cubic-bezier(0, 0, 0.58, 1);   /* ease-out: quick off the mark, gentle landing */

  --bf-dur-fast: 120ms;   /* color, border, background: state changes with no travel */
  --bf-dur-base: 200ms;   /* the hover lift, and anything else that moves */
  --bf-dur-slow: 320ms;   /* drawers, overlays, things crossing real distance */

  /* The coupled trio, kept as aliases: ~130 call sites still reference these. */
  --bf-transition-fast: var(--bf-dur-fast) var(--bf-ease);
  --bf-transition-base: var(--bf-dur-base) var(--bf-ease);
  --bf-transition-slow: var(--bf-dur-slow) var(--bf-ease);

  /* ---------------------------------------------------------------------------
     Elevation  (the hover lift)

     Two tiers, and each one is a COMPLETE recipe: how far it rises, plus the
     rest/hover shadow pair that goes with the rise. Pick a tier by the weight of
     the component; never mix a tier-1 lift with a tier-2 shadow. A hover lift is
     the only thing allowed to translateY on hover.

       tier 1  controls, chips, list rows, small cards
       tier 2  big CTAs, feature cards, panels

     Canonical shape, and the only shape:

       .thing        { box-shadow: var(--bf-elev-rest-1);
                       transition: var(--bf-transition-lift); }
       .thing:hover  { transform: translateY(var(--bf-lift-1));
                       box-shadow: var(--bf-elev-hover-1); }

     Symmetric: the lift falls at the same rate it rises.
     --------------------------------------------------------------------------- */
  --bf-lift-1: -2px;
  --bf-lift-2: -3px;

  --bf-elev-rest-1: var(--bf-shadow-sm);
  --bf-elev-hover-1: var(--bf-shadow-md);
  --bf-elev-rest-2: var(--bf-shadow-md);
  --bf-elev-hover-2: var(--bf-shadow-lg);

  --bf-transition-lift:
    transform var(--bf-dur-base) var(--bf-ease),
    box-shadow var(--bf-dur-base) var(--bf-ease);
}

/* -----------------------------------------------------------------------------
   Reduced motion

   Because duration AND lift distance are both tokens, the whole system stands
   down from one place: nothing travels, and every transition resolves instantly.
   The shadow still changes on hover, so the affordance survives; it just does not
   move. This replaces the scattered per-component reduce blocks and
   no-preference gates, which had drifted into two competing strategies.

   1ms rather than 0s on purpose: a 0s transition never fires transitionend, and
   some components listen for it.
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --bf-dur-fast: 1ms;
    --bf-dur-base: 1ms;
    --bf-dur-slow: 1ms;
    --bf-lift-1: 0px;
    --bf-lift-2: 0px;
  }
}