/* =============================================================================
   FixNook Market - Design Tokens (DTCG 3-tier, CSS custom properties)
   =============================================================================
   Source of truth : design/tokens/fixnook-market.tokens.json (DTCG JSON)
   Structure       : Tier 1 primitive -> Tier 2 semantic -> Tier 3 component,
                     plus a dark-mode override layer ([data-theme="dark"]).
   Brand           : deep blue #1E3A8A + gold #F59E0B (boss-approved 2026-08-21).
   Bootstrap path  : runtime CSS-var re-pointing per frameworks/adapters/bootstrap.md
                     (NO Node / Style Dictionary).
   Values mirror the shipped storefront stylesheet EXACTLY, so this layer is
   pixel-neutral today and adoption of --fn-* vars in components can happen
   incrementally without visual change.
   ============================================================================= */

/* ============================== TIER 1 - PRIMITIVE ========================= */
:root {
  /* Brand blue ramp */
  --fn-blue-50:  #EEF2FA;
  --fn-blue-100: #DCE4F5;
  --fn-blue-200: #C7D6EF;
  --fn-blue-300: #B4C8E8;
  --fn-blue-400: #9DB8E4;
  --fn-blue-500: #7C9BFF;
  --fn-blue-600: #5D7AE8;
  --fn-blue-700: #4C6CE0;
  --fn-blue-800: #3B5BDB;
  --fn-blue-850: #2A4AA0;
  --fn-blue-875: #3458B4;
  --fn-blue-900: #1E3A8A;
  --fn-blue-950: #172554;

  /* Gold / amber ramp */
  --fn-gold-50:  #FFFBEB;
  --fn-gold-100: #FEF3C7;
  --fn-gold-200: #FDE68A;
  --fn-gold-300: #FCD34D;
  --fn-gold-400: #FBBF24;
  --fn-gold-500: #F59E0B;
  --fn-gold-600: #D97706;
  --fn-gold-700: #B45309;
  --fn-gold-800: #92400E;
  --fn-gold-900: #78350F;
  --fn-gold-950: #451A03;

  /* Neutrals (light) */
  --fn-gray-50:  #F9FAFB;
  --fn-gray-100: #F3F4F6;
  --fn-gray-200: #E5E7EB;
  --fn-gray-300: #D1D5DB;
  --fn-gray-400: #9CA3AF;
  --fn-gray-500: #6B7280;
  --fn-gray-600: #4B5563;
  --fn-gray-700: #374151;
  --fn-gray-800: #1F2937;
  --fn-gray-900: #111827;

  /* Neutrals (dark / slate) */
  --fn-slate-50:  #F8FAFC;
  --fn-slate-100: #F1F5F9;
  --fn-slate-200: #E2E8F0;
  --fn-slate-300: #CBD5E1;
  --fn-slate-400: #94A3B8;
  --fn-slate-500: #64748B;
  --fn-slate-600: #475569;
  --fn-slate-700: #334155;
  --fn-slate-800: #1E293B;
  --fn-slate-900: #0F172A;
  --fn-slate-950: #020617;

  /* Night surfaces (dark-mode-specific) */
  --fn-night-400: #2C3E5E; /* dark border strong */
  --fn-night-500: #24334F; /* dark line */
  --fn-night-600: #24345A; /* dark hover layer */
  --fn-night-700: #1C2A4A; /* dark raised chip */
  --fn-night-800: #16203A; /* dark surface-2 */
  --fn-night-875: #0D1526; /* dark sunken / input / footer */
  --fn-night-900: #111A2E; /* dark card */
  --fn-night-950: #0B1220; /* dark page */

  /* Feedback palette (used by sale badges, stock tags, alerts) */
  --fn-red-100:  #FDEBEB;
  --fn-red-200:  #F3C4C4;
  --fn-red-300:  #FCA5A5;
  --fn-red-400:  #F87171;
  --fn-red-600:  #DC2626;
  --fn-red-700:  #B91C1C;
  --fn-red-800:  #991B1B;
  --fn-red-900:  #7F1D1D;
  --fn-red-950:  #450A0A;
  --fn-green-200: #BBF7D0;
  --fn-green-300: #86EFAC;
  --fn-green-400: #4ADE80;
  --fn-green-500: #22C55E;
  --fn-green-600: #16A34A;
  --fn-green-900: #14532D;

  /* Typography */
  --fn-font-heading: 'Outfit', 'Inter', sans-serif;
  --fn-font-body: 'Inter', system-ui, sans-serif;

  /* Radius */
  --fn-radius-sm: 0.5rem;
  --fn-radius-md: 0.75rem;
  --fn-radius-lg: 1rem;
  --fn-radius-pill: 999px;

  /* Shadows */
  --fn-shadow-card: 0 2px 12px rgba(0,0,0,.05);
  --fn-shadow-card-hover: 0 10px 24px rgba(0,0,0,.1);
  --fn-shadow-edge-3d: 0 3px 0 #172554, 0 4px 10px rgba(23,37,84,.25);
}

/* ============================== TIER 2 - SEMANTIC ========================== */
:root {
  /* Brand */
  --fn-color-brand: #1E3A8A;
  --fn-color-brand-hover: #3458B4;
  --fn-color-brand-strong: #172554;
  --fn-color-brand-soft: #EEF2FA;
  --fn-color-brand-faint: #DCE4F5;
  --fn-color-brand-edge: #C7D6EF;
  --fn-color-brand-edge-strong: #B4C8E8;

  /* Accent (gold) */
  --fn-color-accent: #F59E0B;
  --fn-color-accent-bright: #FBBF24;
  --fn-color-accent-brighter: #FCD34D;
  --fn-color-accent-edge: #D97706;
  --fn-color-accent-deep: #B45309;
  --fn-color-accent-ink: #78350F;

  /* Surface */
  --fn-surface-page: #FAFAF8;
  --fn-surface-card: #FFFFFF;
  --fn-surface-raised: #FFFFFF;
  --fn-surface-sunken: #F3F4F6;
  --fn-surface-nav: #FFFFFF;
  --fn-surface-overlay: rgba(17,26,46,.97);

  /* Text */
  --fn-text-primary: #1F2937;
  --fn-text-secondary: #4B5563;
  --fn-text-muted: #6B7280;
  --fn-text-faint: #94A3B8;
  --fn-text-on-brand: #FFFFFF;
  --fn-text-on-accent: #78350F;
  --fn-text-link: #1E3A8A;
  --fn-text-link-hover: #172554;

  /* Border */
  --fn-border-default: #E5E7EB;
  --fn-border-strong: #D1D5DB;
  --fn-border-accent: #C7D6EF;
  --fn-border-focus: #1E3A8A;

  /* Feedback (reference; Bootstrap alerts consume these via --bs-* where mapped) */
  --fn-feedback-success-bg: #BBF7D0;
  --fn-feedback-success-border: #4ADE80;
  --fn-feedback-success-text: #14532D;
  --fn-feedback-error-bg: #FDEBEB;
  --fn-feedback-error-border: #F3C4C4;
  --fn-feedback-error-text: #B91C1C;
  --fn-feedback-info-bg: #EEF2FA;
  --fn-feedback-info-border: #C7D6EF;
  --fn-feedback-info-text: #2A4AA0;
  --fn-feedback-warning-bg: #FEF3C7;
  --fn-feedback-warning-border: #FCD34D;
  --fn-feedback-warning-text: #92400E;
}

/* ============================== TIER 3 - COMPONENT ======================== */
:root {
  /* Buttons - brand */
  --fn-btn-brand-bg: linear-gradient(180deg, #2A4AA0, #1E3A8A);
  --fn-btn-brand-bg-hover: linear-gradient(180deg, #3458B4, #27428F);
  --fn-btn-brand-edge: #172554;
  --fn-btn-brand-text: #FFFFFF;
  --fn-btn-brand-shadow: 0 4px 0 #172554, 0 6px 14px rgba(23,37,84,.28);

  /* Buttons - gold */
  --fn-btn-gold-bg: linear-gradient(180deg, #FBBF24, #F59E0B);
  --fn-btn-gold-bg-hover: linear-gradient(180deg, #FCD34D, #F59E0B);
  --fn-btn-gold-edge: #D97706;
  --fn-btn-gold-text: #78350F;
  --fn-btn-gold-shadow: 0 4px 0 #D97706, 0 6px 14px rgba(217,119,6,.28);

  /* Buttons - outline / light / danger */
  --fn-btn-outline-edge: #C7D6EF;
  --fn-btn-outline-shadow: #B4C8E8;
  --fn-btn-light-bg: linear-gradient(180deg, #FFFFFF, #E8EEF9);
  --fn-btn-danger-edge: #F3C4C4;
  --fn-btn-danger-text: #DC2626;

  /* Price pill */
  --fn-price-pill-bg: linear-gradient(180deg, #FBBF24, #F59E0B);
  --fn-price-pill-edge: #D97706;
  --fn-price-pill-text: #78350F;
  --fn-price-pill-shadow: 0 3px 0 #D97706, 0 4px 8px rgba(217,119,6,.25);

  /* Stock tags */
  --fn-stock-in-bg: linear-gradient(180deg, #BBF7D0, #86EFAC);
  --fn-stock-in-border: #4ADE80;
  --fn-stock-in-text: #14532D;
  --fn-stock-in-shadow: #22C55E;
  --fn-stock-out-bg: linear-gradient(180deg, #FFFFFF, #FDEBEB);
  --fn-stock-out-border: #F3C4C4;
  --fn-stock-out-text: #B91C1C;
  --fn-stock-out-shadow: #F0C0C0;

  /* Meta tags */
  --fn-meta-tag-bg: linear-gradient(180deg, #FFFFFF, #F3F4F6);
  --fn-meta-tag-border: #E5E7EB;
  --fn-meta-tag-text: #4B5563;
  --fn-meta-tag-shadow: #D1D5DB;

  /* Sale badge */
  --fn-sale-badge-bg: linear-gradient(180deg, #F87171, #DC2626);
  --fn-sale-badge-border: #B91C1C;
  --fn-sale-badge-text: #FFFFFF;
  --fn-sale-badge-shadow: #991B1B;

  /* Card */
  --fn-card-bg: #FFFFFF;
  --fn-card-radius: 1rem;
  --fn-card-shadow: 0 2px 12px rgba(0,0,0,.05);

  /* Collection chips */
  --fn-chip-bg: linear-gradient(180deg, #FFFFFF, #F3F4F6);
  --fn-chip-border: #E5E7EB;
  --fn-chip-text: #4B5563;
  --fn-chip-shadow: #D1D5DB;
  --fn-chip-active-bg: linear-gradient(180deg, #2A4AA0, #1E3A8A);
  --fn-chip-active-edge: #172554;
  --fn-chip-active-text: #FFFFFF;

  /* Sticky category bar chips */
  --fn-catbar-chip-bg: #EEF2FA;
  --fn-catbar-chip-text: #1E3A8A;
  --fn-catbar-chip-hover-bg: #DCE4F5;

  /* Inputs */
  --fn-input-bg: #FFFFFF;
  --fn-input-border: #C7D6EF;
  --fn-input-focus-ring: rgba(30,58,138,.15);
  --fn-input-radius: 0.75rem;

  /* Pagination */
  --fn-pagination-bg: linear-gradient(180deg, #FFFFFF, #E8EEF9);
  --fn-pagination-border: #C7D6EF;
  --fn-pagination-text: #1E3A8A;
  --fn-pagination-shadow: #B4C8E8;
  --fn-pagination-active-bg: linear-gradient(180deg, #2A4AA0, #1E3A8A);
  --fn-pagination-active-edge: #172554;

  /* Mobile bottom nav */
  --fn-bottomnav-bg: linear-gradient(180deg, #FFFFFF, #F4F6F5);
  --fn-bottomnav-border: #E2E8E4;
  --fn-bottomnav-shadow: #B4C8E8;

  /* Hero */
  --fn-hero-bg: linear-gradient(135deg, #1E3A8A 0%, #2A4AA0 60%, #172554 100%);
  --fn-hero-badge-bg: linear-gradient(180deg, #FBBF24, #F59E0B);
  --fn-hero-badge-edge: #D97706;
  --fn-hero-badge-text: #78350F;
  --fn-hero-badge-shadow: #B45309;

  /* Breadcrumb bar */
  --fn-breadcrumb-bg: linear-gradient(180deg, #FFFFFF, #F0F4FB);
  --fn-breadcrumb-border: #C7D6EF;
}

/* ===================== BOOTSTRAP 5.3 --bs-* RE-POINTING =================== */
/* Runtime CSS-var path per kit adapters/bootstrap.md (no Sass build). */
:root {
  --bs-primary: var(--fn-color-brand);
  --bs-primary-rgb: 30, 58, 138;
  --bs-link-color: var(--fn-text-link);
  --bs-link-hover-color: var(--fn-text-link-hover);
  --bs-body-bg: var(--fn-surface-page);
  --bs-body-color: var(--fn-text-primary);
  --bs-border-color: var(--fn-border-default);
  --bs-border-color-translucent: rgba(229,231,235,.5);
  --bs-secondary-color: var(--fn-text-muted);
  --bs-tertiary-color: var(--fn-text-muted);
  --bs-secondary-bg: var(--fn-surface-sunken);
  --bs-tertiary-bg: #F9FAFB;
  --bs-border-radius: var(--fn-radius-md);
  --bs-border-radius-sm: var(--fn-radius-sm);
  --bs-border-radius-lg: var(--fn-radius-lg);
  --bs-border-radius-pill: var(--fn-radius-pill);
  --bs-font-sans-serif: var(--fn-font-body);
  --bs-body-font-family: var(--fn-font-body);
  --bs-focus-ring-color: rgba(30,58,138,.25);
}

/* ===================== LEGACY ALIASES (stylesheet glue) =================== */
/* The storefront stylesheet consumes --brand/--bg/--surface/... These alias
   semantic tokens, so both themes flip automatically and the existing rules
   keep working untouched. */
:root {
  --brand: var(--fn-color-brand);
  --brand-dark: var(--fn-color-brand-strong);
  --brand-light: var(--fn-color-brand-soft);
  --bg: var(--fn-surface-page);
  --surface: var(--fn-surface-card);
  --surface2: var(--fn-surface-raised);
  --line: var(--fn-border-default);
  --ink: var(--fn-text-primary);
  --muted: var(--fn-text-muted);
}

/* ===================== DARK MODE - TOKEN OVERRIDES ======================== */
[data-theme="dark"] {
  color-scheme: dark;

  /* Semantic - brand */
  --fn-color-brand: #3B5BDB;
  --fn-color-brand-hover: #5D7AE8;
  --fn-color-brand-strong: #2A4AA0;
  --fn-color-brand-soft: #1C2A4A;
  --fn-color-brand-faint: #24345A;
  --fn-color-brand-edge: #2C3E5E;
  --fn-color-brand-edge-strong: #0B1220;

  /* Semantic - accent (gold stays gold, deeper edge + near-black ink) */
  --fn-color-accent-edge: #B45309;
  --fn-color-accent-deep: #B45309;
  --fn-color-accent-ink: #1A120B;

  /* Semantic - surface */
  --fn-surface-page: #0B1220;
  --fn-surface-card: #111A2E;
  --fn-surface-raised: #16203A;
  --fn-surface-sunken: #0D1526;
  --fn-surface-nav: rgba(17,26,46,.97);
  --fn-surface-overlay: rgba(17,26,46,.97);

  /* Semantic - text */
  --fn-text-primary: #E2E8F0;
  --fn-text-secondary: #CBD5E1;
  --fn-text-muted: #94A3B8;
  --fn-text-faint: #64748B;
  --fn-text-on-accent: #1A120B;
  --fn-text-link: #7C9BFF;
  --fn-text-link-hover: #7C9BFF;

  /* Semantic - border */
  --fn-border-default: #24334F;
  --fn-border-strong: #2C3E5E;
  --fn-border-accent: #2C3E5E;
  --fn-border-focus: #3B5BDB;

  /* Semantic - feedback */
  --fn-feedback-success-bg: #14251A;
  --fn-feedback-success-border: #1F3D2A;
  --fn-feedback-success-text: #86EFAC;
  --fn-feedback-error-bg: #2A1418;
  --fn-feedback-error-border: #4A1F26;
  --fn-feedback-error-text: #FCA5A5;
  --fn-feedback-info-bg: #14243A;
  --fn-feedback-info-border: #1F3D5E;
  --fn-feedback-info-text: #93C5FD;
  --fn-feedback-warning-bg: #2A2114;
  --fn-feedback-warning-border: #4A3A1F;
  --fn-feedback-warning-text: #FCD34D;

  /* Component - buttons */
  --fn-btn-brand-bg: linear-gradient(180deg, #4C6CE0, #1E3A8A);
  --fn-btn-brand-bg-hover: linear-gradient(180deg, #5D7AE8, #2A4AA0);
  --fn-btn-brand-shadow: 0 3px 0 #172554, 0 4px 10px rgba(23,37,84,.5);
  --fn-btn-gold-edge: #B45309;
  --fn-btn-gold-text: #1A120B;
  --fn-btn-gold-shadow: 0 2px 0 #B45309, 0 3px 8px rgba(0,0,0,.35);
  --fn-btn-outline-edge: #3B5BDB;
  --fn-btn-outline-shadow: #0B1220;
  --fn-btn-light-bg: linear-gradient(180deg, #1C2A4A, #16203A);
  --fn-btn-danger-edge: #4A1F26;
  --fn-btn-danger-text: #FCA5A5;

  /* Component - price pill */
  --fn-price-pill-edge: #B45309;
  --fn-price-pill-text: #1A120B;
  --fn-price-pill-shadow: 0 2px 0 #B45309, 0 3px 8px rgba(0,0,0,.35);

  /* Component - stock tags */
  --fn-stock-in-bg: linear-gradient(180deg, #1C2A4A, #16203A);
  --fn-stock-in-border: #2C3E5E;
  --fn-stock-in-text: #CBD5E1;
  --fn-stock-in-shadow: #0B1220;
  --fn-stock-out-bg: linear-gradient(180deg, #2A1418, #1F1216);
  --fn-stock-out-border: #4A1F26;
  --fn-stock-out-text: #FCA5A5;
  --fn-stock-out-shadow: #0B1220;

  /* Component - meta tags */
  --fn-meta-tag-bg: linear-gradient(180deg, #1C2A4A, #16203A);
  --fn-meta-tag-border: #2C3E5E;
  --fn-meta-tag-text: #CBD5E1;
  --fn-meta-tag-shadow: #0B1220;

  /* Component - sale badge */
  --fn-sale-badge-bg: linear-gradient(180deg, #FCA5A5, #DC2626);
  --fn-sale-badge-border: #7F1D1D;
  --fn-sale-badge-shadow: #450A0A;

  /* Component - card */
  --fn-card-bg: #111A2E;
  --fn-card-shadow: 0 1px 0 rgba(0,0,0,.3);

  /* Component - chips */
  --fn-chip-bg: linear-gradient(180deg, #1C2A4A, #16203A);
  --fn-chip-border: #2C3E5E;
  --fn-chip-text: #CBD5E1;
  --fn-chip-shadow: #0B1220;
  --fn-chip-active-bg: linear-gradient(180deg, #4C6CE0, #1E3A8A);
  --fn-chip-active-edge: #172554;

  /* Component - catbar chips */
  --fn-catbar-chip-bg: rgba(255,255,255,.07);
  --fn-catbar-chip-text: #E2E8F0;
  --fn-catbar-chip-hover-bg: rgba(255,255,255,.13);

  /* Component - inputs */
  --fn-input-bg: #0D1526;
  --fn-input-border: #2C3E5E;

  /* Component - pagination */
  --fn-pagination-bg: #111A2E;
  --fn-pagination-border: #2C3E5E;
  --fn-pagination-text: #7C9BFF;
  --fn-pagination-shadow: #0B1220;
  --fn-pagination-active-bg: linear-gradient(180deg, #4C6CE0, #1E3A8A);
  --fn-pagination-active-edge: #172554;

  /* Component - bottom nav */
  --fn-bottomnav-bg: linear-gradient(180deg, #16203A, #0D1526);
  --fn-bottomnav-border: #24334F;
  --fn-bottomnav-shadow: #0B1220;

  /* Component - hero */
  --fn-hero-bg: linear-gradient(135deg, #16203A 0%, #0D1526 70%, #0B1220 100%);
  --fn-hero-badge-edge: #B45309;
  --fn-hero-badge-text: #78350F;
  --fn-hero-badge-shadow: #B45309;

  /* Component - breadcrumb */
  --fn-breadcrumb-bg: #111A2E;
  --fn-breadcrumb-border: #24334F;

  /* Bootstrap re-pointing (dark) */
  --bs-body-bg: var(--fn-surface-page);
  --bs-body-color: var(--fn-text-primary);
  --bs-border-color: var(--fn-border-default);
  --bs-border-color-translucent: rgba(36,51,79,.55);
  --bs-secondary-color: var(--fn-text-muted);
  --bs-tertiary-color: var(--fn-text-muted);
  --bs-secondary-bg: var(--fn-surface-raised);
  --bs-tertiary-bg: var(--fn-surface-sunken);
  --bs-light-rgb: 22, 26, 46;
  --bs-light-bg: var(--fn-surface-raised);
  --bs-primary: var(--fn-color-brand);
  --bs-primary-rgb: 59, 91, 219;
  --bs-link-color: var(--fn-text-link);
  --bs-link-hover-color: var(--fn-text-link-hover);
}