/* ==========================================================================
   WATTMARE DESIGN SYSTEM v1.0
   Marine spare parts supplier · Bhavnagar, India
   Imported from Claude Design System (Wattmare canvas)
   ========================================================================== */

/* ---------- 1. DESIGN TOKENS (custom properties) ---------- */
:root {
  /* === Colors === */
  /* Brand foundations */
  --wm-bone:               #F4EFE6;  /* Bone foreground — light text on dark */
  --wm-bone-soft:          #E8E3D8;  /* Slightly dimmed bone */
  --wm-bone-dim:           #C9C3B6;  /* Bone at ~60% */

  --wm-graphite:           #1A1A1F;  /* Graphite surface — primary dark bg */
  --wm-graphite-soft:      #232328;  /* Card background on dark */
  --wm-graphite-elevated:  #2A2A30;  /* Elevated surface (modals, hover) */
  --wm-graphite-line:      rgba(244, 239, 230, 0.10);  /* hairline borders on dark */

  --wm-cyan:               #00D4FF;  /* Electric cyan — primary accent */
  --wm-cyan-soft:          rgba(0, 212, 255, 0.18);
  --wm-cyan-glow:          rgba(0, 212, 255, 0.35);
  --wm-cyan-text:          #00B8DE;  /* Cyan adjusted for AA contrast on bone */

  /* Status palette */
  --wm-stock-green:        #4ADE80;  /* In stock indicator */
  --wm-stock-green-soft:   rgba(74, 222, 128, 0.15);
  --wm-warn-amber:         #FB923C;  /* Low stock / urgency */
  --wm-warn-amber-soft:    rgba(251, 146, 60, 0.15);
  --wm-error-red:          #F87171;
  --wm-error-red-soft:     rgba(248, 113, 113, 0.15);

  /* Light theme (when needed) */
  --wm-paper:              #FFFFFF;
  --wm-paper-soft:         #FAFAFA;
  --wm-ink:                #0A0A0A;
  --wm-ink-soft:           #27272A;
  --wm-ink-dim:            #71717A;
  --wm-paper-line:         rgba(10, 10, 10, 0.08);

  /* === Typography === */
  --wm-font-display:       "Fraunces", "Canela", "Times New Roman", Georgia, serif;
  --wm-font-body:          "Inter", "Söhne", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --wm-font-mono:          "JetBrains Mono", "SF Mono", "Menlo", "Consolas", monospace;

  /* Type scale (1.25 — major third) */
  --wm-text-xs:            0.72rem;     /* 11.5px */
  --wm-text-sm:            0.82rem;     /* 13px */
  --wm-text-base:          1rem;        /* 16px */
  --wm-text-lg:            1.16rem;
  --wm-text-xl:            1.42rem;
  --wm-text-2xl:           1.77rem;
  --wm-text-3xl:           2.21rem;
  --wm-text-4xl:           2.76rem;
  --wm-text-5xl:           3.45rem;
  --wm-text-6xl:           4.32rem;
  --wm-text-display:       clamp(2.4rem, 5.5vw, 4.8rem);

  /* Letter spacing */
  --wm-tracking-tight:     -0.025em;
  --wm-tracking-snug:      -0.015em;
  --wm-tracking-normal:    -0.005em;
  --wm-tracking-wide:      0.05em;
  --wm-tracking-widest:    0.14em;

  /* Line height */
  --wm-leading-tight:      1.05;
  --wm-leading-snug:       1.25;
  --wm-leading-normal:     1.5;
  --wm-leading-relaxed:    1.65;

  /* === Spacing === */
  --wm-space-1:            4px;
  --wm-space-2:            8px;
  --wm-space-3:            12px;
  --wm-space-4:            16px;
  --wm-space-5:            20px;
  --wm-space-6:            24px;
  --wm-space-8:            32px;
  --wm-space-10:           40px;
  --wm-space-12:           48px;
  --wm-space-16:           64px;
  --wm-space-20:           80px;
  --wm-space-24:           96px;
  --wm-space-32:           128px;

  /* === Borders & radius === */
  --wm-radius-sm:          4px;
  --wm-radius-md:          8px;
  --wm-radius-lg:          12px;
  --wm-radius-xl:          16px;
  --wm-radius-2xl:         24px;
  --wm-radius-pill:        999px;

  /* === Shadows === */
  --wm-shadow-sm:          0 1px 2px rgba(0, 0, 0, 0.04);
  --wm-shadow-md:          0 4px 12px rgba(0, 0, 0, 0.08);
  --wm-shadow-lg:          0 12px 32px rgba(0, 0, 0, 0.10);
  --wm-shadow-xl:          0 20px 60px rgba(0, 0, 0, 0.14);
  --wm-shadow-cyan:        0 0 24px var(--wm-cyan-glow);

  /* === Motion === */
  --wm-ease-out:           cubic-bezier(0.16, 1, 0.3, 1);
  --wm-ease-in-out:        cubic-bezier(0.65, 0, 0.35, 1);
  --wm-dur-fast:           0.15s;
  --wm-dur-normal:         0.25s;
  --wm-dur-slow:           0.45s;
}

/* ---------- 2. TYPOGRAPHY UTILITY CLASSES ---------- */
.wm-display {
  font-family: var(--wm-font-display);
  font-weight: 500;
  font-size: var(--wm-text-display);
  line-height: var(--wm-leading-tight);
  letter-spacing: var(--wm-tracking-tight);
}
.wm-h1 {
  font-family: var(--wm-font-display);
  font-weight: 500;
  font-size: var(--wm-text-5xl);
  line-height: var(--wm-leading-tight);
  letter-spacing: var(--wm-tracking-tight);
}
.wm-h2 {
  font-family: var(--wm-font-display);
  font-weight: 500;
  font-size: var(--wm-text-4xl);
  line-height: var(--wm-leading-snug);
  letter-spacing: var(--wm-tracking-tight);
}
.wm-h3 {
  font-family: var(--wm-font-body);
  font-weight: 700;
  font-size: var(--wm-text-2xl);
  line-height: var(--wm-leading-snug);
  letter-spacing: var(--wm-tracking-snug);
}
.wm-body {
  font-family: var(--wm-font-body);
  font-weight: 400;
  font-size: var(--wm-text-base);
  line-height: var(--wm-leading-normal);
  letter-spacing: var(--wm-tracking-normal);
}
.wm-mono {
  font-family: var(--wm-font-mono);
  font-weight: 500;
  font-size: var(--wm-text-sm);
  letter-spacing: var(--wm-tracking-normal);
}
.wm-eyebrow {
  font-family: var(--wm-font-mono);
  font-weight: 600;
  font-size: var(--wm-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--wm-tracking-widest);
  color: var(--wm-ink-dim);
}

/* ---------- 3. STATUS BADGES ---------- */
.wm-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--wm-space-2);
  font-family: var(--wm-font-mono);
  font-size: var(--wm-text-xs);
  font-weight: 600;
  letter-spacing: var(--wm-tracking-wide);
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--wm-radius-sm);
  white-space: nowrap;
}

/* Dot indicator */
.wm-badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Variants */
.wm-badge--stock {
  background: var(--wm-stock-green-soft);
  color: var(--wm-stock-green);
  border: 1px solid var(--wm-stock-green-soft);
}
.wm-badge--oem {
  background: var(--wm-cyan-soft);
  color: var(--wm-cyan);
  border: 1px solid var(--wm-cyan-soft);
}
.wm-badge--reconditioned {
  background: rgba(244, 239, 230, 0.06);
  color: var(--wm-bone-dim);
  border: 1px solid var(--wm-graphite-line);
}
.wm-badge--low-stock {
  background: var(--wm-warn-amber-soft);
  color: var(--wm-warn-amber);
  border: 1px solid var(--wm-warn-amber-soft);
}
.wm-badge--dispatch {
  background: transparent;
  color: var(--wm-bone-soft);
  border: 1px solid var(--wm-graphite-line);
}
.wm-badge--dispatch::before { display: none; }

/* Light-theme variants (when on light bg) */
.wm-section-light .wm-badge--reconditioned {
  background: rgba(10, 10, 10, 0.05);
  color: var(--wm-ink-soft);
  border-color: var(--wm-paper-line);
}
.wm-section-light .wm-badge--dispatch {
  background: var(--wm-paper-soft);
  color: var(--wm-ink-soft);
  border-color: var(--wm-paper-line);
}

/* ---------- 4. BREADCRUMB (Mono trail) ---------- */
.wm-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--wm-space-2);
  font-family: var(--wm-font-mono);
  font-size: var(--wm-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--wm-tracking-wide);
  color: var(--wm-bone-dim);
  flex-wrap: wrap;
}
.wm-breadcrumb a {
  color: var(--wm-bone-dim);
  text-decoration: none;
  transition: color var(--wm-dur-fast) var(--wm-ease-out);
}
.wm-breadcrumb a:hover {
  color: var(--wm-cyan);
}
.wm-breadcrumb .wm-breadcrumb-sep {
  color: var(--wm-graphite-line);
  user-select: none;
}
.wm-breadcrumb .wm-breadcrumb-current {
  color: var(--wm-bone);
}
/* Light theme breadcrumb */
.wm-section-light .wm-breadcrumb {
  color: var(--wm-ink-dim);
}
.wm-section-light .wm-breadcrumb a {
  color: var(--wm-ink-dim);
}
.wm-section-light .wm-breadcrumb a:hover {
  color: var(--wm-cyan-text);
}
.wm-section-light .wm-breadcrumb .wm-breadcrumb-current {
  color: var(--wm-ink);
}

/* ---------- 5. BUTTONS ---------- */
.wm-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--wm-space-2);
  font-family: var(--wm-font-body);
  font-size: var(--wm-text-base);
  font-weight: 600;
  letter-spacing: var(--wm-tracking-snug);
  padding: 14px 26px;
  border-radius: var(--wm-radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--wm-dur-normal) var(--wm-ease-out);
  white-space: nowrap;
}

/* Primary — Electric cyan */
.wm-btn--primary {
  background: var(--wm-cyan);
  color: var(--wm-graphite);
  box-shadow: var(--wm-shadow-cyan);
}
.wm-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 32px var(--wm-cyan-glow);
}

/* Ghost — outlined */
.wm-btn--ghost {
  background: transparent;
  color: var(--wm-bone);
  border-color: var(--wm-graphite-line);
}
.wm-btn--ghost:hover {
  background: rgba(244, 239, 230, 0.06);
  border-color: rgba(244, 239, 230, 0.3);
}
.wm-section-light .wm-btn--ghost {
  color: var(--wm-ink);
  border-color: var(--wm-paper-line);
}
.wm-section-light .wm-btn--ghost:hover {
  background: var(--wm-paper-soft);
  border-color: rgba(10, 10, 10, 0.25);
}

/* Mono pill — small UI button */
.wm-btn--mono {
  font-family: var(--wm-font-mono);
  font-size: var(--wm-text-xs);
  font-weight: 600;
  letter-spacing: var(--wm-tracking-wide);
  text-transform: uppercase;
  padding: 8px 16px;
  background: var(--wm-cyan-soft);
  color: var(--wm-cyan);
  border: 1px solid var(--wm-cyan-soft);
}
.wm-btn--mono:hover {
  background: var(--wm-cyan);
  color: var(--wm-graphite);
}

/* Sizes */
.wm-btn--sm { padding: 10px 20px; font-size: var(--wm-text-sm); }
.wm-btn--lg { padding: 18px 32px; font-size: var(--wm-text-lg); }

/* ---------- 6. SURFACE / SECTION ---------- */
.wm-surface {
  background: var(--wm-graphite);
  color: var(--wm-bone);
}
.wm-surface-light {
  background: var(--wm-paper);
  color: var(--wm-ink);
}
.wm-section-light {
  background: var(--wm-paper);
  color: var(--wm-ink);
}
.wm-card {
  background: var(--wm-graphite-soft);
  border: 1px solid var(--wm-graphite-line);
  border-radius: var(--wm-radius-xl);
  padding: var(--wm-space-8);
}

/* ---------- 7. RESPONSIVE BASELINE ---------- */
@media (max-width: 768px) {
  :root {
    --wm-space-section: var(--wm-space-12);
  }
}