/* MakeProxyCard — Brand override (v0.4.0 restyle)
   Based on Brand Guideline v1.0 (dark theme, mint accent, burgundy CTA, sharp corners).
   This file overrides the default Tailwind CDN light-mode classes used in views/*.ejs
   so the entire store renders in the dark brand theme without touching page logic. */

:root {
  /* Brand palette (from guideline) */
  --brand-accent:   #17EF97;  /* mint - primary brand accent (ALSO CTA / ACTIVE) */
  --brand-cta:      #17EF97;  /* mint - CTAs & active state (was #a4004f) */
  --brand-cta-hover:#4c4c4c;  /* grey hover for primary CTA */
  --brand-bg-1:     #0a0a0a;  /* page background (deepest) */
  --brand-bg-2:     #1f1f1f;  /* surface (cards/header) */
  --brand-bg-3:     #262626;  /* inputs / secondary surface */
  --brand-bg-4:     #383838;  /* elevated product cards */
  --brand-text:     #FFFFFF;
  --brand-text-2:   #888888;  /* secondary text */
  --brand-text-3:   #555555;  /* tertiary / muted */
  --brand-border:   rgba(255,255,255,0.10);
  --brand-success:  #2e7d32;
  --brand-warning:  #f57f17;
  --brand-error:    #c62828;
  --brand-info:     #1565c0;
  --brand-highlight:#fdd835;
  --brand-radius:   0px;       /* sharp corners per guideline */
  --brand-radius-sm:4px;
  --brand-radius-md:6px;
  --brand-radius-full:9999px;
  --brand-transition: 0.2s ease;
}

body {
  background: var(--brand-bg-1) !important;
  color: var(--brand-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Verdana, sans-serif !important;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Light-mode surface classes -> dark theme surfaces
   ============================================================ */
.bg-white          { background-color: var(--brand-bg-2) !important; }
.bg-slate-50       { background-color: var(--brand-bg-1) !important; }
.bg-slate-100      { background-color: var(--brand-bg-3) !important; }
.bg-slate-200      { background-color: var(--brand-bg-4) !important; }
.bg-slate-800      { background-color: var(--brand-bg-4) !important; }

/* White-translucent overlays (used on the SPA for action buttons on slot tiles) */
.bg-white\/90      { background-color: rgba(255,255,255,0.9) !important; color: #000 !important; }
.bg-white\/95      { background-color: rgba(255,255,255,0.95) !important; color: #000 !important; }

/* Borders */
.border-slate-100  { border-color: var(--brand-border) !important; }
.border-slate-200  { border-color: var(--brand-border) !important; }
.border-slate-300  { border-color: rgba(255,255,255,0.18) !important; }
.border-slate-600  { border-color: rgba(255,255,255,0.25) !important; }

/* Text */
.text-slate-800    { color: var(--brand-text) !important; }
.text-slate-700    { color: var(--brand-text) !important; }
.text-slate-600    { color: var(--brand-text-2) !important; }
.text-slate-500    { color: var(--brand-text-2) !important; }
.text-slate-400    { color: var(--brand-text-2) !important; }

/* Brand accent text variants */
.text-violet-600, .text-violet-700 { color: var(--brand-accent) !important; }

/* ============================================================
   Buttons - sharpen corners, switch to burgundy CTA
   ============================================================ */
.btn-primary {
  background: var(--brand-cta) !important;
  color: #0a0a0a !important;          /* mint CTA reads on dark BG; dark text reads on mint */
  padding: 12px 21px !important;
  border-radius: var(--brand-radius-md) !important;   /* 6px - md per brand */
  border: 1px solid var(--brand-cta) !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all var(--brand-transition) !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
.btn-primary:hover {
  background: var(--brand-cta-hover) !important;
  border-color: var(--brand-cta-hover) !important;
  color: #FFFFFF !important;
}
.btn-primary:disabled {
  background: var(--brand-bg-3) !important;
  border-color: var(--brand-bg-3) !important;
  color: var(--brand-text-3) !important;
  cursor: not-allowed !important;
}

.btn-secondary {
  background: transparent !important;
  color: #FFFFFF !important;
  padding: 12px 21px !important;
  border-radius: var(--brand-radius-md) !important;   /* 6px - md per brand */
  border: 1px solid var(--brand-border) !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all var(--brand-transition) !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
.btn-secondary:hover {
  background: rgba(23,239,151,0.10) !important;
  border-color: var(--brand-accent) !important;
  color: var(--brand-accent) !important;
}

/* Surface-level rounded-* stay sharp 0px (cards, panels, sections). */
.rounded, .rounded-sm, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl {
  border-radius: var(--brand-radius) !important;
}
.rounded-full { border-radius: var(--brand-radius-full) !important; }

/* ============================================================
   Inputs - dark theme
   ============================================================ */
.input {
  width: 100% !important;
  padding: 10px 14px !important;
  background: var(--brand-bg-3) !important;
  color: var(--brand-text) !important;
  border: 1px solid var(--brand-border) !important;
  border-radius: var(--brand-radius-md) !important;  /* 6px - md per brand */
  font-size: 14px !important;
  transition: border-color var(--brand-transition) !important;
}
.input:focus {
  outline: none !important;
  border-color: var(--brand-accent) !important;
  box-shadow: none !important;
}
.input::placeholder {
  color: var(--brand-text-2) !important;
}

/* Native select & textarea get the same treatment */
select.input, textarea.input {
  background-color: var(--brand-bg-3) !important;
  color: var(--brand-text) !important;
}
select.input option {
  background: var(--brand-bg-3) !important;
  color: var(--brand-text) !important;
}

/* ============================================================
   Auth card
   ============================================================ */
.auth-card {
  max-width: 420px !important;
  margin: 2rem auto !important;
  background: var(--brand-bg-2) !important;
  border: 1px solid var(--brand-border) !important;
  border-radius: var(--brand-radius) !important;
  padding: 2rem !important;
}

/* ============================================================
   Header - black BG (#0a0a0a) + mint CTA buttons
   ============================================================ */
body > header,
header.bg-white,
header[class*="bg-white"] {
  background-color: var(--brand-bg-1) !important;   /* #0a0a0a per brand */
  border-bottom: 1px solid var(--brand-border) !important;
}

/* Brand link (M chip + wordmark) - transparent so wordmark reads on dark header.
   The M chip inside is targeted separately below. */
header a.brand-link,
header > div > a[href="/"] {
  background: transparent !important;
  border: none !important;
  color: var(--brand-text) !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Brand chip in header (the M logo tile) - bulletproof mint override.
   Wins against Tailwind CDN's bg-violet-600 via (id specificity + class). */
header a.brand-link > .bg-violet-600,
header > div > a[href="/"] > .bg-violet-600,
header .brand-chip,
header div.brand-chip,
header [class*="brand-chip"] {
  background-color: #17EF97 !important;
  background-image: none !important;
  color: #0a0a0a !important;
  border-radius: 6px !important;
  border: 1px solid #17EF97 !important;
}

/* Brand wordmark text in header - plain white on dark */
header a.brand-link > span,
header > div > a[href="/"] > span {
  color: var(--brand-text) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Nav links (Cart / Login / Account / Sign up) - all rendered as mint buttons. */
header nav a {
  background-color: var(--brand-accent) !important;
  color: #0a0a0a !important;
  font-weight: 700 !important;
  border: 1px solid var(--brand-accent) !important;
  border-radius: 6px !important;
  border-top-left-radius: 6px !important;
  border-top-right-radius: 6px !important;
  border-bottom-left-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
  transition: background var(--brand-transition), color var(--brand-transition), border-color var(--brand-transition) !important;
}
header nav a:hover {
  background-color: var(--brand-cta-hover) !important;
  border-color: var(--brand-cta-hover) !important;
  color: #FFFFFF !important;
}

/* Cart count badge (absolute pill on cart link) - white circle with black text so it stands out on dark theme */
#nav-cart-count,
header nav a span#nav-cart-count,
.cart-count-badge {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

/* ============================================================
   Cart item card row
   ============================================================ */
.card-deck {
  background: var(--brand-bg-2) !important;
  border: 1px solid var(--brand-border) !important;
  border-radius: var(--brand-radius) !important;
  padding: 1.25rem !important;
  margin-bottom: 0.75rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
}

/* ============================================================
   Flash messages
   ============================================================ */
.bg-rose-50        { background-color: rgba(198,40,40,0.15) !important; }
.text-rose-800     { color: #ff9a9a !important; }
.border-rose-200   { border-color: var(--brand-error) !important; }
.bg-emerald-50     { background-color: rgba(46,125,50,0.15) !important; }
.text-emerald-800  { color: #8fd490 !important; }
.border-emerald-200{ border-color: var(--brand-success) !important; }

/* ============================================================
   Scrollbars - dark
   ============================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--brand-bg-4); border-radius: 4px; }
::-webkit-scrollbar-track { background: var(--brand-bg-1); }

/* ============================================================
   Selection accent
   ============================================================ */
::selection {
  background: var(--brand-accent);
  color: #000;
}