/* CLASSIC shared primitives. Customer and operations layouts remain independent. */
@import url('classic-motion.css');
:root {
  --classic-ink: #1a1714;
  --classic-white: #ffffff;
  --classic-ivory: #f5f2ec;
  --classic-paper: #faf9f7;
  --classic-surface: #f5f5f5;
  --classic-border: #dedbd5;
  --classic-muted: #6b655e;
  --classic-secondary: #55514c;
  --classic-walnut: #5c4a32;
  --classic-caramel: #c4914a;
  --classic-success: #17643b;
  --classic-success-bg: #edf7f0;
  --classic-warning: #80500e;
  --classic-warning-bg: #fff7e6;
  --classic-danger: #a32d2d;
  --classic-danger-bg: #fdf0ef;
  --classic-info: #24558b;
  --classic-info-bg: #eef4fb;
  --classic-display: 'Cormorant Garamond', Georgia, serif;
  --classic-body: 'DM Sans', Arial, sans-serif;
  --classic-utility: 'Barlow Condensed', Arial, sans-serif;
  --classic-ops-display: 'Syne', Arial, sans-serif;
  --classic-mono: 'DM Mono', ui-monospace, monospace;
  --classic-space-1: 4px;
  --classic-space-2: 8px;
  --classic-space-3: 12px;
  --classic-space-4: 16px;
  --classic-space-6: 24px;
  --classic-space-8: 32px;
  --classic-radius-sm: 4px;
  --classic-radius: 8px;
  --classic-radius-lg: 12px;
  --classic-nav-height: 64px;
  --classic-sidebar: 248px;
  --classic-inventory-sidebar: 240px;
  --classic-fast: 150ms;
  --classic-normal: 220ms;
  --classic-slow: 300ms;

  /* Shared customer typography tokens */
  --customer-eyebrow-size: 13px;
  --customer-eyebrow-weight: 600;
  --customer-eyebrow-spacing: 2px;
  --customer-eyebrow-color: var(--classic-muted);
  --customer-display-size: clamp(36px, 5vw, 56px);
  --customer-heading-size: clamp(28px, 4vw, 42px);
  --customer-subheading-size: 15px;
  --customer-card-title-size: 20px;
  --customer-body-size: 15px;
  --customer-meta-size: 13px;
  --customer-label-size: 11px;

  /* Shorthand aliases across storefront & operations */
  --ink: #1a1714;
  --cream: #f5f2ec;
  --ivory: #f5f2ec;
  --white: #ffffff;
  --black: #1a1714;
  --border: #dedbd5;
  --muted: #6b655e;
  --muted2: #55514c;
  --panel-bg: #0f0f0f;
  --navbar-h: 64px;
  --topbar-h: 56px;
  --sidebar-w: 248px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --success: #17643b;
  --danger: #a32d2d;
  --warning: #80500e;
  --info: #24558b;
  --success-bg: #edf7f0;
  --danger-bg: #fdf0ef;
  --warning-bg: #fff7e6;
  --info-bg: #eef4fb;
  --success-pale: #edf7f0;
  --danger-pale: #fdf0ef;
  --warning-pale: #fff7e6;
  --info-pale: #eef4fb;
}

/* Defensive image sizing to prevent blowout across all templates */
img {
  max-width: 100%;
  height: auto;
}
/* A two-color ring stays visible on both the dark shell and white forms. */
body :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--classic-ink) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--classic-white) !important;
}
body :is(button, input, select, textarea) { font-family: var(--classic-body); }
body :is(button, a, [role="button"]) { touch-action: manipulation; }
body :is(button, input, select, textarea):disabled { cursor: not-allowed; }
.classic-skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 20000;
  padding: 12px 18px; background: var(--classic-white); color: var(--classic-ink);
  transform: translateY(-150%); font: 600 14px var(--classic-body);
}
.classic-skip-link:focus { transform: none; }
/* Preserve transition completion callbacks while respecting motion preferences. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-delay: 0ms !important;
    animation-iteration-count: 1 !important; transition-duration: .01ms !important;
    transition-delay: 0ms !important; scroll-behavior: auto !important;
  }
  body :is(.reveal, .reveal-stagger, .reveal-stagger > *, .store-card, .site-footer, .editorial-band, .section-head, .hero-eyebrow, .hero-headline, .hero-subtext, .hero-cta) {
    opacity: 1 !important; transform: none !important;
  }
}

/* ── Progressive Web App (PWA) Standalone Display & Safe Areas ── */
:root {
  --pwa-safe-top: env(safe-area-inset-top, 0px);
  --pwa-safe-bottom: env(safe-area-inset-bottom, 0px);
  --pwa-safe-left: env(safe-area-inset-left, 0px);
  --pwa-safe-right: env(safe-area-inset-right, 0px);
}

@media (display-mode: standalone) {
  html, body {
    -webkit-tap-highlight-color: transparent;
  }
}