/* Store 3331 design system: tokens, components and motion. Loaded last; visual only. */
:root{
  --font-display:"Inter","Geist","Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-body:var(--font-display);
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;
  --fs-meta:.75rem;--fs-body:.9375rem;--fs-heading:1.25rem;--fs-title:clamp(1.75rem,3vw,2.5rem);--fs-display:clamp(2.25rem,5.2vw,4rem);
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:72px;
  --radius-sm:10px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(10,30,22,.06),0 1px 1px rgba(10,30,22,.04);
  --shadow-md:0 8px 24px -8px rgba(10,30,22,.14),0 2px 6px rgba(10,30,22,.05);
  --shadow-lg:0 28px 60px -24px rgba(10,30,22,.28),0 6px 16px rgba(10,30,22,.06);
  --border-subtle:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  --ease-out:cubic-bezier(.22,1,.36,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);
  --motion-fast:.14s;--motion-normal:.28s;--motion-slow:.6s;
  --surface-raised:color-mix(in srgb,var(--surface) 92%,var(--bg));
  --spot-x:50%;--spot-y:0%;
}
body[data-theme="dark"]{
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 10px 28px -10px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03) inset;
  --shadow-lg:0 32px 70px -26px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04) inset;
  --border-subtle:1px solid rgba(255,255,255,.07);
}

body{font-family:var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"cv11","ss01"}
h1,h2,h3,.hero-heading,.section-title{font-family:var(--font-display);letter-spacing:-.022em}
.stat strong,.pulse-count,.mini-insight strong,td.num,.num{font-variant-numeric:tabular-nums}

/* Cards: layered surface with a soft highlight and hover lift */
.hero-card,.stat,.panel{
  border:var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
  background-image:linear-gradient(180deg,rgba(255,255,255,.55),transparent 42%);
  transition:transform var(--motion-normal) var(--ease-out),box-shadow var(--motion-normal) var(--ease-out);
}
body[data-theme="dark"] .hero-card,body[data-theme="dark"] .stat,body[data-theme="dark"] .panel{background-image:linear-gradient(180deg,rgba(255,255,255,.035),transparent 40%)}
.stat:hover,.panel:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.hero-card:before,.stat:before,.panel:before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(360px circle at var(--pointer-x,50%) var(--pointer-y,0),var(--glow),transparent 65%);
  transition:opacity var(--motion-normal);
}
.hero-card,.stat,.panel{position:relative}
@media (hover:hover){.hero-card:hover:before,.stat:hover:before,.panel:hover:before{opacity:1}}

/* Hero */
.hero-main{padding:clamp(24px,4vw,56px)}
.hero-eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--fs-meta);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hero-main .hero-heading{font-size:var(--fs-display);line-height:1.04;font-weight:800;margin:var(--space-4) 0 var(--space-3);letter-spacing:-.035em}
.hero-greeting{display:block;color:var(--muted);font-weight:600;font-size:var(--fs-heading);letter-spacing:-.01em;margin-bottom:var(--space-2)}
.hero-state{display:inline-flex;align-items:center;gap:var(--space-2);padding:6px 14px;border-radius:var(--radius-pill);font-size:.8125rem;font-weight:700;border:var(--border-subtle);background:var(--surface-2)}
.hero-state:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green-2);box-shadow:0 0 0 4px var(--glow)}
.hero-state[data-state="attention"]:before{background:var(--amber);box-shadow:0 0 0 4px rgba(245,130,32,.22)}

/* Buttons */
.btn,.hero-main .btn-primary,.hero-main .btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-5);
  border-radius:var(--radius-pill);font-weight:700;font-size:var(--fs-body);cursor:pointer;
  transition:transform var(--motion-fast) var(--ease-out),box-shadow var(--motion-normal) var(--ease-out),background var(--motion-fast);
}
.btn-primary{border:0;background:var(--text);color:var(--bg);box-shadow:var(--shadow-md)}
.btn-secondary{border:var(--border-subtle);background:var(--surface);color:var(--text)}
button,.btn{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
@media (hover:hover){.btn:hover,.nav button:hover{transform:translateY(-1px)}}
.btn:active,button:active:not(:disabled){transform:scale(.97);transition-duration:var(--motion-fast)}
:focus-visible{outline:2px solid var(--green-2);outline-offset:2px;border-radius:var(--radius-sm)}

/* Navigation: soft active state */
.nav button{border-radius:var(--radius-md)}
.nav button.active,.nav button[aria-current="page"]{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 6px 18px -8px rgba(0,0,0,.45)}

/* Inputs */
input[type="search"],input[type="text"],select{transition:box-shadow var(--motion-normal) var(--ease-out),border-color var(--motion-fast)}
input:focus{box-shadow:0 0 0 4px var(--glow);border-color:var(--green-2)}

/* Badges */
.badge,.chip{border-radius:var(--radius-pill);font-weight:700;letter-spacing:.01em}

/* Table rows: calmer */
tbody tr{transition:background var(--motion-fast)}
tbody tr:hover{background:color-mix(in srgb,var(--green-2) 6%,transparent)}

/* Product images stay at their native 48px */
td img,.item-img,.product-thumb{width:48px;height:48px;object-fit:cover;border-radius:var(--radius-sm)}

/* Modals */
.modal,#modal,#itemDetailModal{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.modal>*,#modal>div,#itemDetailModal>div{animation:ds-pop var(--motion-normal) var(--ease-spring)}
@keyframes ds-pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

/* Reveal: transform and opacity only */
.reveal-in{opacity:0;transform:translateY(14px);transition:opacity var(--motion-slow) var(--ease-out),transform var(--motion-slow) var(--ease-out)}
.reveal-in.is-visible{opacity:1;transform:none}
.reveal-in.is-visible:hover{transform:none}

/* Page switch */
.view-enter{animation:ds-view var(--motion-normal) var(--ease-out)}
@keyframes ds-view{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Skeleton */
.skeleton{background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 37%,var(--surface-3) 63%);background-size:300% 100%;animation:ds-shimmer 1.4s linear infinite;border-radius:var(--radius-sm);color:transparent}
@keyframes ds-shimmer{to{background-position:-100% 0}}

/* Mobile recomposition and touch targets */
@media (max-width:760px){
  .hero-main{padding:var(--space-5)}
  .hero-main .hero-heading{font-size:clamp(2rem,10vw,2.75rem)}
  .btn,button{min-height:44px}
  .stat:hover,.panel:hover{transform:none}
}
@media (hover:none){.hero-card:before,.stat:before,.panel:before{display:none}}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal-in{opacity:1;transform:none}
}