/*
 * BF365 design tokens — light-mode canonical values + dark-mode foundation.
 *
 * Phase 11B1: semantic roles + dark token block only.
 * Dark mode is not activated until a root `data-bf-theme="dark"` is applied
 * in a later phase. Default (no attribute) remains light and visually unchanged.
 */

:root,
[data-bf-theme="light"] {
  /* Brand / status (unchanged across themes unless noted) */
  --bf-color-primary: #050505;
  --bf-color-primary-soft: #111111;
  /* Scool-look port: every former orange action role resolves to BF365 red. */
  --bf-color-red: #e8342a;
  --bf-color-red-dark: #bd2119;
  --bf-color-orange: #e8342a;
  --bf-color-brand-soft: #fcedeb;
  --bf-color-brand-wash: #fff5f4;
  --bf-color-green: #16a34a;
  --bf-color-yellow: #f59e0b;
  --bf-color-red-soft: #fdecec;

  /* Legacy text / surface tokens (public API — keep light output stable) */
  --bf-text-main: #111111;
  --bf-text-muted: #666666;
  --bf-text-light: #999999;

  --bf-bg-main: #ffffff;
  --bf-bg-soft: #f7f7f8;
  --bf-bg-dark: #050505;

  --bf-border: #e5e7eb;
  --bf-border-strong: #d1d5db;

  --bf-radius-xs: 6px;
  --bf-radius-sm: 8px;
  --bf-radius-md: 12px;
  --bf-radius-lg: 18px;
  --bf-radius-xl: 24px;
  --bf-radius-pill: 999px;

  --bf-shadow-card: 0 8px 24px rgba(15, 23, 42, 0.08);
  --bf-shadow-soft: 0 4px 16px rgba(15, 23, 42, 0.06);

  --bf-font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* BF365 container system — single source of truth */
  --bf365-container-max: 1440px;
  /*
   * Desktop gutter, 56px -> 24px.
   *
   * This is the only place the value lives, and every one of the eleven rules
   * that consume it already sits inside a min-width: 1024px query (two of them
   * at 1025px, in product.css), so editing it here is automatically scoped to
   * desktop. Tablet and mobile are untouched: measured 0px of movement at 390,
   * 768 and 1023px on all six page types.
   *
   * It buys 64px of content column at every width from 1024px up — 912 -> 976
   * at 1024, 1328 -> 1392 at 1440 and beyond. The 1440px figure is not a typo:
   * box-sizing is border-box, so the gutter is subtracted INSIDE the 1440px
   * max-width rather than sitting outside it.
   *
   * The product grid does NOT reflow. Every product grid in the theme is
   * repeat(N, minmax(0,1fr)) with N fixed by a viewport media query, and
   * archive.js picks its column count from window.innerWidth against the same
   * 768/992/1280 thresholds. Neither side reads this token, so the columns hold
   * at 2/3/4/5 and only the cards grow (249,59 -> 262,39px at 1440).
   *
   * Nothing compensates for this value anywhere: the theme has seven negative
   * margins and one full-bleed trick, and none of them reads the gutter — they
   * offset their own padding, or act on the vertical axis, or (the full-bleed)
   * live inside a max-width: 767px query.
   *
   * Two knock-on effects, both intended, both visible on the product page:
   * .bf-sticky-atc derives its width from this token (product.css) so the bar
   * widens by 64px, and its inner padding comes from the --bf-gutter-desktop
   * alias so its contents sit 32px closer to the edge.
   *
   * Do NOT chase this value with find-and-replace on "56px":
   * --bf-section-gap-desktop below is a different token that merely happens to
   * share the number, and it controls vertical section rhythm site-wide.
   */
  --bf365-container-gutter-desktop: 24px;
  --bf365-container-gutter-tablet: 28px;
  --bf365-container-gutter-mobile: 16px;

  /* Legacy aliases (do not use separate values) */
  --bf-container: var(--bf365-container-max);
  --bf-container-max: var(--bf365-container-max);
  --bf-gutter-desktop: var(--bf365-container-gutter-desktop);
  --bf-gutter-tablet: var(--bf365-container-gutter-tablet);
  --bf-gutter-mobile: var(--bf365-container-gutter-mobile);

  --bf-section-gap-desktop: 56px;
  --bf-section-gap-mobile: 32px;

  --bf-header-height-desktop: 84px;
  --bf-header-height-mobile: 64px;
  --bf-bottom-nav-height: 64px;

  /*
   * Semantic roles (Phase 11B1).
   * Light values map to existing public tokens so current CSS stays stable.
   * Inverse / on-primary are fixed light values — never tied to page background.
   */
  --bf-surface-page: var(--bf-bg-main);
  --bf-surface-elevated: var(--bf-bg-main);
  --bf-surface-muted: var(--bf-bg-soft);
  --bf-surface-input: var(--bf-bg-main);
  --bf-surface-media: #f5f5f5;

  --bf-text-primary: var(--bf-text-main);
  --bf-text-secondary: var(--bf-text-muted);
  --bf-text-muted-dark-ready: var(--bf-text-muted);
  --bf-text-inverse: #ffffff;
  --bf-on-primary: #ffffff;

  --bf-border-default: var(--bf-border);
  --bf-border-strong-dark-ready: var(--bf-border-strong);

  --bf-overlay: rgba(15, 23, 42, 0.45);
  --bf-shadow-color: rgba(15, 23, 42, 0.08);

  --bf-disabled-bg: #e5e7eb;
  --bf-disabled-text: #9ca3af;
  --bf-skeleton-bg: #e5e7eb;

  /* ===================================================================
   * Style-guide scales (added, nothing above is changed).
   *
   * Everything below existed only inside the mockups. Bringing it here
   * makes tokens.css the single source the components can rely on, so
   * component CSS stops inventing one-off px values.
   * =================================================================== */

  /* --- Spacing: 4px base. Every gap/padding should land on this scale --- */
  --bf-space-1: 4px;
  --bf-space-2: 8px;
  --bf-space-3: 12px;
  --bf-space-4: 16px;
  --bf-space-5: 20px;
  --bf-space-6: 24px;
  --bf-space-8: 32px;
  --bf-space-10: 40px;
  --bf-space-12: 48px;
  --bf-space-16: 64px;
  --bf-space-20: 80px;

  /* --- Type scale. 2xs is for uppercase badges with tracking, nothing else --- */
  --bf-text-2xs: 11px;
  --bf-text-xs: 12px;
  --bf-text-sm: 14px;
  --bf-text-base: 16px;
  --bf-text-lg: 18px;
  --bf-text-xl: 20px;
  --bf-text-2xl: 24px;
  --bf-text-3xl: 30px;
  --bf-text-4xl: 38px;
  --bf-text-5xl: 48px;

  --bf-leading-tight: 1.15;
  --bf-leading-snug: 1.3;
  --bf-leading-normal: 1.55;
  --bf-leading-relaxed: 1.75;

  --bf-weight-normal: 400;
  --bf-weight-medium: 500;
  --bf-weight-semibold: 600;
  --bf-weight-bold: 700;
  --bf-weight-black: 800;

  /* --- Fonts: self-hosted, see fonts.css. Vietnamese subset included --- */
  --bf-font-head: 'Barlow Condensed', var(--bf-font-main);
  --bf-font-body: 'Be Vietnam Pro', var(--bf-font-main);
  /* Barlow Condensed is already narrow; mixed-case headings need no extra
   * tracking. Uppercase is NOT applied to headings globally — long Vietnamese
   * product and article titles become unreadable in caps. Eyebrows and badges
   * opt in per component with --bf-tracking-wide. */
  --bf-head-tracking: 0;
  --bf-tracking-wide: 0.06em;

  /* --- Z-index: one ladder, so nothing has to guess a number again --- */
  --bf-z-base: 1;
  --bf-z-dropdown: 100;
  --bf-z-sticky: 200;
  --bf-z-header: 300;
  --bf-z-drawer: 400;
  --bf-z-modal: 500;
  --bf-z-toast: 600;

  /* --- Motion. Respect prefers-reduced-motion at the component level --- */
  --bf-duration-fast: 120ms;
  --bf-duration-base: 200ms;
  --bf-duration-slow: 320ms;
  --bf-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --bf-ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* --- Interaction states ---
   * The focus ring is deliberately blue, not brand red: a red ring on a red
   * button is invisible to anyone with red-green colour blindness. */
  --bf-focus: #2563eb;
  --bf-red-700: #a10a12;
  --bf-red-100: #fbd5d7;
  --bf-ink-700: #1f1f22;
  --bf-ink-600: #3a3a3f;
  --bf-green-soft: #e8f7ee;
  --bf-yellow-soft: #fef3e2;

  /* --- Fixed bars ---
   * The sticky buy bar and the bottom navigation are two different bars that
   * are never on screen together; they had been sharing one variable. */
  --bf-topbar-height: 30px;
  --bf-bottomnav-height: 64px;
  --bf-stickybar-height: var(--bf-bottom-nav-height);
}

/*
 * Dark semantic token set — inactive until data-bf-theme="dark" is applied.
 * Does not redefine legacy --bf-bg-* / --bf-text-* public aliases yet
 * (component migration is Phase 11B2+). Brand red and action black stay put.
 */
[data-bf-theme="dark"] {
  --bf-surface-page: #121214;
  --bf-surface-elevated: #1c1c1f;
  --bf-surface-muted: #18181b;
  --bf-surface-input: #1c1c1f;
  /* Product photography stays on a light neutral canvas in dark mode. */
  --bf-surface-media: #f5f5f5;

  --bf-text-primary: #f4f4f5;
  --bf-text-secondary: #c8c8ce;
  --bf-text-muted-dark-ready: #a8a8b3;
  --bf-text-inverse: #ffffff;
  --bf-on-primary: #ffffff;

  --bf-border-default: #6b6b76;
  --bf-border-strong-dark-ready: #8b8b96;

  --bf-overlay: rgba(0, 0, 0, 0.62);
  --bf-shadow-color: rgba(0, 0, 0, 0.45);

  --bf-disabled-bg: #27272a;
  --bf-disabled-text: #8b8b96;
  --bf-skeleton-bg: #27272a;

  /* Soft status tints tuned for dark surfaces (brand red hue preserved). */
  --bf-color-red-soft: #3a1418;
}

@media (max-width: 767px) {
  :root {
    --bf-section-gap-desktop: var(--bf-section-gap-mobile);
  }
}