/* ==========================================================================
   APEXCOMMERCE — DESIGN TOKENS
   Phase 01 · Foundation layer. Every page must consume these tokens.
   Never hard-code a colour, radius, shadow or font-size in a component.
   ========================================================================== */

/* --- Local font loading (offline-safe) ----------------------------------- */
@import url("../../vendor/fonts/fonts.css");

/* ==========================================================================
   1. COLOUR SYSTEM
   ========================================================================== */
:root {
  /* Brand — primary (deep eucalyptus green) */
  --apx-primary-900: #0A2A20;
  --apx-primary-800: #0E2B21; /* Admin sidebar */
  --apx-primary-700: #0F3529; /* Primary hover / active */
  --apx-primary-600: #123F31; /* PRIMARY */
  --apx-primary-500: #1B5A45;
  --apx-primary-400: #2D6A4F; /* Secondary / charts */
  --apx-primary-300: #6E9C86;
  --apx-primary-200: #A9C6B7;
  --apx-primary-100: #D5E4DC;
  --apx-primary-050: #EAF1ED; /* Selected tint */

  --apx-primary: var(--apx-primary-600);
  --apx-primary-hover: var(--apx-primary-700);
  --apx-primary-active: var(--apx-primary-900);
  --apx-primary-soft: var(--apx-primary-050);
  --apx-on-primary: #FFFFFF;

  /* Brand — secondary */
  --apx-secondary: var(--apx-primary-400);
  --apx-secondary-soft: #E9F1ED;
  --apx-on-secondary: #FFFFFF;

  /* Accent — amber. ON DARK SURFACES ONLY (fails AA on white). */
  --apx-accent: #E8A33D;
  --apx-accent-hover: #F0B45C;
  --apx-accent-soft: #FDF3E2;
  --apx-accent-text: #B45309; /* AA-safe amber for text on light */
  --apx-on-accent: #15231B;

  /* Neutrals — green-tinted ink, not grey */
  --apx-bg: #F6F7F4;
  --apx-bg-alt: #EFF1EC;
  --apx-surface: #FFFFFF;
  --apx-surface-2: #F0F2ED;
  --apx-surface-3: #E7EAE3;
  --apx-surface-inverse: #0E2B21;

  --apx-text: #151A16;
  --apx-text-secondary: #3D473F;
  --apx-text-muted: #5B6660;
  --apx-text-faint: #8A928C;
  --apx-text-inverse: #F4F7F4;
  --apx-text-on-dark-muted: #A9BCB1;

  --apx-border: #E2E6DF;
  --apx-border-strong: #C6CCC3;
  --apx-border-dark: rgba(255, 255, 255, 0.12);

  /* Status */
  --apx-success: #1F7A4D;
  --apx-success-soft: #E7F4ED;
  --apx-success-border: #BFE0CE;

  --apx-warning: #B45309;
  --apx-warning-soft: #FDF2E4;
  --apx-warning-border: #F0D6AC;

  --apx-danger: #C0362C;
  --apx-danger-soft: #FCEDEC;
  --apx-danger-border: #F1C9C5;

  --apx-info: #1D4E89;
  --apx-info-soft: #E9F0F9;
  --apx-info-border: #C4D6EC;

  /* Semantic aliases used by components */
  --apx-sale: var(--apx-danger);
  --apx-rating: var(--apx-accent-text);
  --apx-link: var(--apx-primary-600);
  --apx-link-hover: var(--apx-primary-700);

  /* Stripe / payment context */
  --apx-stripe: #635BFF;

  /* ==========================================================================
     2. TYPOGRAPHY
     ========================================================================== */
  --apx-font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --apx-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --apx-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --apx-fs-display: clamp(2.25rem, 1.4rem + 3.6vw, 3.5rem);   /* 36 -> 56 */
  --apx-fs-h1: clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem);          /* 28 -> 40 */
  --apx-fs-h2: clamp(1.5rem, 1.28rem + 1vw, 1.875rem);          /* 24 -> 30 */
  --apx-fs-h3: 1.375rem;   /* 22 */
  --apx-fs-h4: 1.125rem;   /* 18 */
  --apx-fs-h5: 1rem;       /* 16 */
  --apx-fs-body-lg: 1.0625rem; /* 17 */
  --apx-fs-body: 0.9375rem;    /* 15 */
  --apx-fs-small: 0.84375rem;  /* 13.5 */
  --apx-fs-caption: 0.75rem;   /* 12 */
  --apx-fs-overline: 0.6875rem;/* 11 */

  --apx-lh-display: 1.08;
  --apx-lh-heading: 1.22;
  --apx-lh-body: 1.6;
  --apx-lh-tight: 1.35;

  --apx-tracking-display: -0.02em;
  --apx-tracking-heading: -0.012em;
  --apx-tracking-body: 0;
  --apx-tracking-caption: 0.01em;
  --apx-tracking-overline: 0.1em;

  /* ==========================================================================
     3. SPACING (4px base scale)
     ========================================================================== */
  --apx-space-0: 0;
  --apx-space-1: 0.125rem;  /* 2  */
  --apx-space-2: 0.25rem;   /* 4  */
  --apx-space-3: 0.5rem;    /* 8  */
  --apx-space-4: 0.75rem;   /* 12 */
  --apx-space-5: 1rem;      /* 16 */
  --apx-space-6: 1.25rem;   /* 20 */
  --apx-space-7: 1.5rem;    /* 24 */
  --apx-space-8: 2rem;      /* 32 */
  --apx-space-9: 2.5rem;    /* 40 */
  --apx-space-10: 3rem;     /* 48 */
  --apx-space-11: 4rem;     /* 64 */
  --apx-space-12: 5rem;     /* 80 */
  --apx-space-13: 7.5rem;   /* 120 */

  --apx-section-y: var(--apx-space-10);      /* mobile 48 */
  --apx-container-max: 84rem;                /* 1344px */
  --apx-container-pad: var(--apx-space-5);
  --apx-gutter: var(--apx-space-5);

  /* ==========================================================================
     4. RADIUS
     ========================================================================== */
  --apx-radius-xs: 4px;
  --apx-radius-sm: 6px;
  --apx-radius-md: 10px;
  --apx-radius-lg: 16px;
  --apx-radius-xl: 24px;
  --apx-radius-pill: 999px;
  --apx-radius-circle: 50%;

  /* ==========================================================================
     5. SHADOWS (green-tinted, low opacity)
     ========================================================================== */
  --apx-shadow-xs: 0 1px 2px rgba(18, 63, 49, 0.06);
  --apx-shadow-sm: 0 2px 8px rgba(18, 63, 49, 0.07);
  --apx-shadow-md: 0 8px 24px rgba(18, 63, 49, 0.10);
  --apx-shadow-lg: 0 16px 48px rgba(18, 63, 49, 0.14);
  --apx-shadow-xl: 0 24px 64px rgba(10, 42, 32, 0.20);
  --apx-shadow-inset: inset 0 1px 3px rgba(18, 63, 49, 0.08);
  --apx-focus-ring: 0 0 0 3px rgba(45, 106, 79, 0.28);
  --apx-focus-ring-danger: 0 0 0 3px rgba(192, 54, 44, 0.24);

  /* ==========================================================================
     6. MOTION
     ========================================================================== */
  --apx-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --apx-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --apx-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --apx-dur-fast: 120ms;
  --apx-dur-base: 200ms;
  --apx-dur-slow: 320ms;
  --apx-dur-slower: 480ms;

  /* ==========================================================================
     7. LAYOUT / Z-INDEX
     ========================================================================== */
  --apx-header-h: 4.5rem;      /* 72px desktop row-2 */
  --apx-header-h-mobile: 3.5rem;
  --apx-announce-h: 2.375rem;  /* 38px */
  --apx-bottomnav-h: 3.75rem;  /* 60px */
  --apx-sidebar-w: 16.5rem;    /* 264px admin */
  --apx-sidebar-w-collapsed: 4.5rem;
  --apx-filter-w: 17.5rem;     /* 280px storefront filters */

  --apx-z-announce: 1020;
  --apx-z-header: 1030;
  --apx-z-sticky-sub: 1025;
  --apx-z-drawer-backdrop: 1040;
  --apx-z-drawer: 1045;
  --apx-z-modal-backdrop: 1050;
  --apx-z-modal: 1055;
  --apx-z-toast: 1080;
  --apx-z-tooltip: 1090;
  --apx-z-bottomnav: 1015;
}

@media (min-width: 768px) {
  :root {
    --apx-section-y: var(--apx-space-11);
    --apx-container-pad: var(--apx-space-7);
    --apx-gutter: var(--apx-space-6);
  }
}
@media (min-width: 1200px) {
  :root {
    --apx-section-y: var(--apx-space-12);
    --apx-container-pad: var(--apx-space-8);
  }
}

/* ==========================================================================
   8. BOOTSTRAP VARIABLE BRIDGE
   Bootstrap utilities inherit the ApexCommerce palette automatically.
   ========================================================================== */
:root,
[data-bs-theme="light"] {
  --bs-blue: #1D4E89;
  --bs-green: #1F7A4D;
  --bs-red: #C0362C;
  --bs-yellow: #E8A33D;
  --bs-primary: #123F31;
  --bs-secondary: #2D6A4F;
  --bs-success: #1F7A4D;
  --bs-info: #1D4E89;
  --bs-warning: #B45309;
  --bs-danger: #C0362C;
  --bs-light: #F0F2ED;
  --bs-dark: #0E2B21;

  --bs-primary-rgb: 18, 63, 49;
  --bs-secondary-rgb: 45, 106, 79;
  --bs-success-rgb: 31, 122, 77;
  --bs-info-rgb: 29, 78, 137;
  --bs-warning-rgb: 180, 83, 9;
  --bs-danger-rgb: 192, 54, 44;

  --bs-body-font-family: var(--apx-font-sans);
  --bs-body-font-size: 0.9375rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.6;
  --bs-body-color: var(--apx-text);
  --bs-body-bg: var(--apx-bg);

  --bs-border-color: var(--apx-border);
  --bs-border-radius: var(--apx-radius-md);
  --bs-border-radius-sm: var(--apx-radius-sm);
  --bs-border-radius-lg: var(--apx-radius-lg);
  --bs-link-color: var(--apx-link);
  --bs-link-hover-color: var(--apx-link-hover);
  --bs-code-color: #9C3D6E;
  --bs-emphasis-color: var(--apx-text);
}

/* ==========================================================================
   9. BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--apx-header-h) + var(--apx-announce-h) + 1rem);
}

body {
  margin: 0;
  font-family: var(--apx-font-sans);
  font-size: var(--apx-fs-body);
  line-height: var(--apx-lh-body);
  color: var(--apx-text);
  background-color: var(--apx-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Headings — display serif */
h1, h2, h3, .apx-h1, .apx-h2, .apx-h3 {
  font-family: var(--apx-font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  color: var(--apx-text);
  margin: 0;
}
h4, h5, h6, .apx-h4, .apx-h5, .apx-h6 {
  font-family: var(--apx-font-sans);
  font-weight: 600;
  letter-spacing: var(--apx-tracking-heading);
  color: var(--apx-text);
  margin: 0;
}
h1, .apx-h1 { font-size: var(--apx-fs-h1); line-height: var(--apx-lh-heading); letter-spacing: var(--apx-tracking-heading); }
h2, .apx-h2 { font-size: var(--apx-fs-h2); line-height: var(--apx-lh-heading); letter-spacing: var(--apx-tracking-heading); }
h3, .apx-h3 { font-size: var(--apx-fs-h3); line-height: var(--apx-lh-tight); }
h4, .apx-h4 { font-size: var(--apx-fs-h4); line-height: var(--apx-lh-tight); }
h5, .apx-h5 { font-size: var(--apx-fs-h5); line-height: var(--apx-lh-tight); }
h6, .apx-h6 { font-size: var(--apx-fs-body); line-height: var(--apx-lh-tight); }

p { margin: 0 0 var(--apx-space-5); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--apx-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--apx-dur-fast) var(--apx-ease-out);
}
a:hover { color: var(--apx-link-hover); }

/* Visible focus everywhere — accessibility requirement */
:focus-visible {
  outline: 2px solid var(--apx-primary-400);
  outline-offset: 2px;
  border-radius: var(--apx-radius-xs);
}
.on-dark :focus-visible,
[data-theme="dark"] :focus-visible { outline-color: var(--apx-accent); }

::selection { background: var(--apx-primary-100); color: var(--apx-primary-900); }

/* Thin, brand-tinted scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--apx-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--apx-border-strong); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   10. TYPOGRAPHY UTILITIES
   ========================================================================== */
.apx-display {
  font-family: var(--apx-font-display);
  font-size: var(--apx-fs-display);
  line-height: var(--apx-lh-display);
  letter-spacing: var(--apx-tracking-display);
  font-weight: 600;
}
.apx-body-lg { font-size: var(--apx-fs-body-lg); line-height: 1.65; }
.apx-small { font-size: var(--apx-fs-small); line-height: 1.5; }
.apx-caption { font-size: var(--apx-fs-caption); line-height: 1.4; color: var(--apx-text-muted); }
.apx-overline {
  font-size: var(--apx-fs-overline);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: var(--apx-tracking-overline);
  text-transform: uppercase;
  color: var(--apx-text-muted);
}
.apx-lead { font-size: var(--apx-fs-body-lg); color: var(--apx-text-secondary); line-height: 1.65; }
.apx-muted { color: var(--apx-text-muted) !important; }
.apx-faint { color: var(--apx-text-faint) !important; }
.apx-strong { font-weight: 600; }
.apx-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.apx-price { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.01em; }
.apx-link-quiet { color: inherit; text-decoration: none; }
.apx-link-quiet:hover { color: var(--apx-primary); }
.apx-underline-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: 500;
}

/* ==========================================================================
   11. ICON SYSTEM (local SVG sprite — no network, no icon font)
   Usage: <svg class="apx-icon"><use href="../vendor/icons/bootstrap-icons.svg#bag"/></svg>
   ========================================================================== */
.apx-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex: 0 0 auto;
  vertical-align: -0.125em;
  display: inline-block;
}
.apx-icon-sm { font-size: 0.875rem; }
.apx-icon-lg { font-size: 1.25rem; }
.apx-icon-xl { font-size: 1.5rem; }
.apx-icon-2xl { font-size: 2rem; }
.apx-icon-3xl { font-size: 2.75rem; }

/* ==========================================================================
   12. LAYOUT UTILITIES
   ========================================================================== */
.apx-container {
  width: 100%;
  max-width: var(--apx-container-max);
  margin-inline: auto;
  padding-inline: var(--apx-container-pad);
}
.apx-container-narrow { max-width: 64rem; }
.apx-container-xs { max-width: 30rem; }
.apx-section { padding-block: var(--apx-section-y); }
.apx-section-sm { padding-block: var(--apx-space-8); }
.apx-stack-1 > * + * { margin-top: var(--apx-space-1); }
.apx-stack-2 > * + * { margin-top: var(--apx-space-2); }
.apx-stack-3 > * + * { margin-top: var(--apx-space-3); }
.apx-stack-4 > * + * { margin-top: var(--apx-space-4); }
.apx-stack-5 > * + * { margin-top: var(--apx-space-5); }
.apx-stack-6 > * + * { margin-top: var(--apx-space-6); }
.apx-stack-7 > * + * { margin-top: var(--apx-space-7); }
.apx-stack-8 > * + * { margin-top: var(--apx-space-8); }
.apx-divider { height: 1px; background: var(--apx-border); border: 0; margin: 0; }
.apx-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.apx-skip-link {
  position: absolute; left: var(--apx-space-4); top: -100px; z-index: 2000;
  background: var(--apx-primary); color: #fff; padding: 0.65rem 1rem;
  border-radius: 0 0 var(--apx-radius-md) var(--apx-radius-md);
  font-weight: 600; text-decoration: none; transition: top var(--apx-dur-base) var(--apx-ease-out);
}
.apx-skip-link:focus { top: 0; color: #fff; }

/* ==========================================================================
   13. ANIMATION PRIMITIVES
   ========================================================================== */
@keyframes apx-fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes apx-fade-up { from { opacity: 0; transform: translate3d(0, 12px, 0) } to { opacity: 1; transform: none } }
@keyframes apx-fade-down { from { opacity: 0; transform: translate3d(0, -8px, 0) } to { opacity: 1; transform: none } }
@keyframes apx-slide-in-right { from { transform: translate3d(100%, 0, 0) } to { transform: none } }
@keyframes apx-slide-in-left { from { transform: translate3d(-100%, 0, 0) } to { transform: none } }
@keyframes apx-scale-in { from { opacity: 0; transform: scale(.96) } to { opacity: 1; transform: none } }
@keyframes apx-spin { to { transform: rotate(360deg) } }
@keyframes apx-shimmer { 100% { transform: translateX(100%) } }
@keyframes apx-pulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
@keyframes apx-toast-in { from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.97) } to { opacity: 1; transform: none } }
@keyframes apx-shake { 10%,90% { transform: translateX(-1px) } 20%,80% { transform: translateX(2px) } 30%,50%,70% { transform: translateX(-3px) } 40%,60% { transform: translateX(3px) } }
@keyframes apx-bar { from { transform: translateX(-100%) } to { transform: translateX(400%) } }
@keyframes apx-pop { 0% { transform: scale(1) } 45% { transform: scale(1.28) } 100% { transform: scale(1) } }

.apx-anim-fade-up { animation: apx-fade-up var(--apx-dur-slow) var(--apx-ease-out) both; }
.apx-anim-fade-in { animation: apx-fade-in var(--apx-dur-base) var(--apx-ease-out) both; }

/* Stagger helper: children fade up in sequence */
.apx-stagger > * { animation: apx-fade-up var(--apx-dur-slower) var(--apx-ease-out) both; }
.apx-stagger > *:nth-child(1) { animation-delay: 0ms }
.apx-stagger > *:nth-child(2) { animation-delay: 45ms }
.apx-stagger > *:nth-child(3) { animation-delay: 90ms }
.apx-stagger > *:nth-child(4) { animation-delay: 135ms }
.apx-stagger > *:nth-child(5) { animation-delay: 180ms }
.apx-stagger > *:nth-child(6) { animation-delay: 225ms }
.apx-stagger > *:nth-child(7) { animation-delay: 270ms }
.apx-stagger > *:nth-child(8) { animation-delay: 315ms }

/* ==========================================================================
   14. REDUCED MOTION — mandatory accessibility behaviour
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .apx-shimmer::after { display: none; }
}

/* ==========================================================================
   15. PRINT
   ========================================================================== */
@media print {
  .apx-header, .apx-announce, .apx-footer, .apx-bottomnav, .apx-cookie { display: none !important; }
  body { background: #fff; }
}