/* ==========================================================================
   Franphie Marketplace Design System — "Canopy" — Design Tokens
   Version 4.0.0
   Source of truth: design-system/01-brand-foundations.md & 02-design-tokens.md
   Load BEFORE Bootstrap / theme css. Values are final; do not add ad-hoc hex.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- Primitives: Emerald (brand) ---------- */
  --color-emerald-50:  #ECFDF5;
  --color-emerald-100: #D1FAE5;
  --color-emerald-200: #A7F3D0;
  --color-emerald-300: #6EE7B7;
  --color-emerald-400: #34D399;
  --color-emerald-500: #10B981;
  --color-emerald-600: #059669; /* signature brand accent */
  --color-emerald-700: #047857; /* primary CTA bg (white text AA 5.48:1) */
  --color-emerald-800: #065F46; /* links/headings on light (AAA 7.69:1) */
  --color-emerald-900: #064E3B; /* price emphasis (AAA 9.72:1) */
  --color-emerald-950: #022C22; /* brand ink (AAA ~15.9:1) */

  /* ---------- Primitives: Neutral (green-tinted slate) ---------- */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #F8FAFC; /* page bg */
  --color-neutral-100: #F1F5F9;
  --color-neutral-200: #E2E8F0; /* borders */
  --color-neutral-300: #CBD5E1;
  --color-neutral-400: #94A3B8; /* decorative / strikethrough price (no body text) */
  --color-neutral-500: #64748B; /* muted text AA 4.76:1 */
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1E293B; /* body text */
  --color-neutral-900: #0F172A;

  /* ---------- Primitives: Semantic ---------- */
  --color-danger-50:   #FEF2F2;
  --color-danger-100:  #FEE2E2;
  --color-danger-500:  #EF4444;
  --color-danger-600:  #DC2626; /* sale price / error text (AA 4.5:1) */
  --color-danger-700:  #B91C1C; /* destructive bg + white text (AA) */
  --color-warning-50:  #FFFBEB;
  --color-warning-500: #F59E0B; /* icon fill only */
  --color-warning-600: #D97706; /* large warning text */
  --color-warning-700: #B45309; /* warning text (AA 5.5:1) */
  --color-info-50:     #F0F9FF;
  --color-info-500:    #0EA5E9; /* icon fill */
  --color-info-700:    #0369A1; /* info text (AA 4.9:1) */

  /* ---------- Aliases: Brand ---------- */
  --bp-cta:             var(--color-emerald-700);
  --bp-cta-hover:       var(--color-emerald-800);
  --bp-cta-active:      var(--color-emerald-900);
  --bp-cta-disabled:    var(--color-neutral-300);
  --bp-accent:          var(--color-emerald-600);
  --bp-accent-soft:     var(--color-emerald-50);
  --bp-ink:             var(--color-emerald-950);
  --bp-on-cta:          #FFFFFF;
  --bp-brand-soft-top:  var(--color-emerald-50);
  --bp-brand-soft-bottom: var(--color-emerald-100);

  /* ---------- Aliases: Text ---------- */
  --bp-text:            var(--color-neutral-800);
  --bp-text-muted:      var(--color-neutral-500);
  --bp-text-strong:     var(--color-neutral-900);
  --bp-link:            var(--color-emerald-800);
  --bp-link-hover:      var(--color-emerald-900);
  --bp-price:           var(--color-emerald-900);
  --bp-price-sale:      var(--color-danger-600);
  --bp-price-original:  var(--color-neutral-400);

  /* ---------- Aliases: Surfaces & strokes ---------- */
  --bp-bg:              var(--color-neutral-50);
  --bp-surface:         var(--color-neutral-0);
  --bp-surface-alt:     var(--color-neutral-100);
  --bp-border:          var(--color-neutral-200);
  --bp-border-strong:   var(--color-neutral-300);
  --bp-divider:         var(--color-neutral-100);
  --bp-overlay:         rgba(2, 44, 34, 0.55);

  /* ---------- Aliases: Status ---------- */
  --bp-success-bg:      var(--color-emerald-50);
  --bp-success-text:    var(--color-emerald-800);
  --bp-danger-bg:       var(--color-danger-50);
  --bp-danger-text:     var(--color-danger-600);
  --bp-warning-bg:      var(--color-warning-50);
  --bp-warning-text:    var(--color-warning-700);
  --bp-info-bg:         var(--color-info-50);
  --bp-info-text:       var(--color-info-700);
  --bp-focus:           var(--color-emerald-600);

  --bp-stock-in:        var(--color-emerald-700);
  --bp-stock-low:       var(--color-warning-700);
  --bp-stock-out:       var(--color-neutral-500);
  --bp-badge-verified-bg:  var(--color-emerald-100);
  --bp-badge-verified-text: var(--color-emerald-800);

  /* ---------- Typography ---------- */
  --font-display:       "Poppins", ui-sans-serif, system-ui, sans-serif;
  --font-body:          "Nunito", ui-sans-serif, system-ui, sans-serif;

  --font-display-xl:     clamp(2.5rem, 6vw, 4rem);
  --font-display:        clamp(2rem, 4vw, 3rem);
  --font-h1:             clamp(1.75rem, 3vw, 2.5rem);
  --font-h2:             clamp(1.5rem, 2.5vw, 2rem);
  --font-h3:             1.375rem;
  --font-h4:             1.125rem;
  --font-body-lg:        1.125rem;
  --font-body:           1rem;
  --font-body-sm:        0.875rem;
  --font-caption:        0.75rem;
  --font-eyebrow:        0.75rem;

  /* ---------- Spacing (4px quantum) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* ---------- Radius ---------- */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-xs:   0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm:   0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:   0 4px 8px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg:   0 12px 24px -6px rgba(15, 23, 42, 0.12), 0 6px 12px -6px rgba(15, 23, 42, 0.08);
  --shadow-xl:   0 24px 48px -12px rgba(15, 23, 42, 0.18);
  --shadow-brand: 0 8px 20px -6px rgba(5, 150, 105, 0.35);

  /* ---------- Motion ---------- */
  --motion-fast:    120ms;
  --motion-base:    180ms;
  --motion-enter:    240ms;
  --motion-slow:    320ms;
  --ease-standard:  cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --header-h: 64px;
  --header-h-mobile: 56px;
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* ---------- Dark mode (alias-only swap, optional theme preset) ---------- */
@media (prefers-color-scheme: dark) {
  :root[data-theme="dark"] {
    color-scheme: dark;

    --bp-bg:            #0B1714;           /* near emerald-950 surface */
    --bp-surface:       #10231D;
    --bp-surface-alt:   #163027;
    --bp-border:        #1F3A31;
    --bp-border-strong: #2C4D41;
    --bp-text:          #E2E8E5;
    --bp-text-muted:    #94A3B8;
    --bp-text-strong:   #FFFFFF;
    --bp-link:          #34D399;
    --bp-link-hover:    #6EE7B7;
    --bp-price:         #6EE7B7;
    --bp-accent:        #34D399;
    --bp-cta:           #10B981;
    --bp-cta-hover:     #34D399;
    --bp-on-cta:        #022C22;
    --bp-focus:         #34D399;
    --bp-overlay:       rgba(2, 44, 34, 0.72);
    --bp-badge-verified-bg: rgba(52, 211, 153, 0.16);
  }
}