/* DEMI Designs and Prints - Shared Design System
   Loaded on every page BEFORE the page-specific stylesheet. Every page
   must share the same --bg - no page gets its own background. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --bg: #f5efe6;
  --ink: #332a20;
  --muted: #8a7a68;
  --wood: #8f6842;
  --sand: #cdb297;
  --accent: #2eb9fc;
  --card: #fffdfa;
  --line: #e8dcc9;

  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --shadow-sm: 0 2px 10px rgba(51, 42, 32, 0.06);
  --shadow-md: 0 12px 30px rgba(51, 42, 32, 0.08);
  --shadow-lg: 0 24px 60px rgba(51, 42, 32, 0.12);
}

/* Pure-white theme for landing, catalog, customizer and every dashboard view.
   Deliberately scoped with :not() so the login and signup pages (and the
   preloader, which uses its own hard-coded inline styles) keep their
   original cream look. Overriding the tokens on <body> cascades to every
   card/sidebar/container that uses var(--bg), var(--card) or var(--line). */
body:not(.login-wrapper):not(.signup-wrapper) {
  --bg: #ffffff;
  --card: #ffffff;
  --line: #e8e8ec;
  --bg-page: #ffffff;
  --bg-subtle: #fafafa;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.10);
  --shadow-card: 0 2px 14px rgba(0, 0, 0, 0.06);
  background: #ffffff;
}

/* Tinted ambient blobs would read as an off-white wash on pure white. */
body:not(.login-wrapper):not(.signup-wrapper) .blob {
  display: none;
}

/* Cards/containers were translucent-white with a white border (glass look),
   which vanishes on a pure white page - give them a soft visible edge. */
body:not(.login-wrapper):not(.signup-wrapper) .stat-card,
body:not(.login-wrapper):not(.signup-wrapper) .kpi-tile,
body:not(.login-wrapper):not(.signup-wrapper) .glass-card,
body:not(.login-wrapper):not(.signup-wrapper) .table-responsive {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

body:not(.login-wrapper):not(.signup-wrapper) .chart-container {
  background: #fafafa;
  border: 1px solid #f1f3f5;
}

body:not(.login-wrapper):not(.signup-wrapper) .sidebar {
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Smooth in-page anchor jumps (nav's #home/#products, the hero carousel's
   image-only slide "Browse all products" pill) - skipped under reduced
   motion for the same reason the carousel's own autoplay is. */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--font-sans);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
}

/* Shared status-pill look - rounded pill, colored per status, used for
   order status, role badges, product status, etc. across every page */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge.status-good { background: rgba(46, 185, 82, 0.14); color: #2e8b46; }
.badge.status-warning { background: rgba(217, 145, 44, 0.16); color: #a86a1c; }
.badge.status-info { background: rgba(46, 185, 252, 0.14); color: #1489ad; }
.badge.status-danger { background: rgba(214, 76, 55, 0.14); color: #b8402a; }

.text-muted { color: var(--muted); }

/* Ambient background blobs - large, heavily-blurred, low-opacity color
   shapes sitting behind everything on the page. Purely atmospheric:
   their only job is to give the glass cards' backdrop-filter something
   to refract/tint - not to read as decoration in their own right, so
   keep them big, blurred, and low-opacity if you ever adjust these.
   z-index:-1 (not 0) is deliberate: body/the page wrappers don't create
   their own stacking context, so a -1 fixed element here paints above
   the flat --bg canvas but behind ALL normal content site-wide (text,
   headers, cards alike) without needing every card to be repositioned.
   Position/size can be nudged per page (see each page's own CSS) for
   variety - just keep them large/blurred/low-opacity. */
.blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  z-index: -1;
  pointer-events: none;
}

.blob-1 {
  width: 420px;
  height: 420px;
  background: rgba(46, 185, 252, 0.16);
  top: -120px;
  left: -80px;
}

.blob-2 {
  width: 480px;
  height: 480px;
  background: rgba(143, 104, 66, 0.14);
  bottom: -160px;
  right: -100px;
}

/* Minimalist glassmorphism card treatment - frosted/translucent, sits on
   top of the ambient blobs above. Applied directly to the existing card
   selectors (bento-card, product-card, stat-card, kpi-tile, etc. - see
   each page's own CSS) rather than requiring markup changes everywhere;
   kept here too as a literal reusable class for any new card going
   forward. Only ever touches an element's own background/border/shadow -
   never apply backdrop-filter to a card's text/buttons/children, or the
   content itself goes blurry along with the backdrop. */
.glass-card {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(51, 42, 32, 0.08);
}

/* Shared primary button - the one place accent blue shows up solid */
.btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--accent);
  color: #04283a;
  border: none;
  padding: 0.9rem 1.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 10px 24px rgba(46, 185, 252, 0.35);
}

.btn-accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(46, 185, 252, 0.45);
}