/* ============================================
   DIGIGARS DESIGN SYSTEM
   Shared variables + base component styles
   ============================================ */

:root {
  /* Backgrounds */
  --dg-bg-primary: #0d0b0a;      /* near-black page background */
  --dg-bg-card: #1a1614;          /* card/panel background */
  --dg-bg-card-hover: #221d1a;
  --dg-bg-elevated: #26201d;       /* modals, dropdowns */

  /* Gold accent family */
  --dg-gold: #c89b3c;              /* primary gold - buttons, headings */
  --dg-gold-bright: #e0b94f;       /* hover states, ratings */
  --dg-gold-muted: #8a6d33;        /* borders, dividers */
  --dg-gold-dark: #6b5424;         /* pressed states */

  /* Text */
  --dg-text-primary: #f2ede4;      /* main body text, ivory */
  --dg-text-secondary: #b8afa3;    /* subdued labels */
  --dg-text-muted: #7a7168;

  /* Status badges */
  --dg-status-humidor: #4a7c59;    /* "IN HUMIDOR" green */
  --dg-status-smoke: #c47f2c;      /* "SMOKE ONE" amber */
  --dg-status-wishlist: #3d6b8a;   /* "WISHLIST" blue */
  --dg-status-smoked: #6b6560;     /* "SMOKED" grey */

  /* Borders & dividers */
  --dg-border: #332c27;
  --dg-border-light: #453b34;

  /* Typography */
  --dg-font-display: 'Marcellus', Georgia, serif;  /* headings, "DIGIGARS" wordmark */
  --dg-font-body: 'Roboto', -apple-system, sans-serif;      /* body text, UI */

  /* Spacing */
  --dg-radius-card: 12px;
  --dg-radius-button: 8px;
  --dg-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* ============================================
   BASE ELEMENTS
   ============================================ */

body {
  background: var(--dg-bg-primary);
  color: var(--dg-text-primary);
  font-family: var(--dg-font-body);
}

h1, h2, h3, .dg-brand {
  font-family: var(--dg-font-display);
  color: var(--dg-gold);
  letter-spacing: 0.02em;
}

/* ============================================
   CARDS (cigar cards, dashboard panels, feed posts)
   ============================================ */

.dg-card {
  background: var(--dg-bg-card);
  border: 1px solid var(--dg-border);
  border-radius: var(--dg-radius-card);
  box-shadow: var(--dg-shadow-card);
  padding: 16px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.dg-card:hover {
  background: var(--dg-bg-card-hover);
  border-color: var(--dg-gold-muted);
}

/* ============================================
   BUTTONS
   ============================================ */

.dg-btn-primary {
  background: var(--dg-gold);
  color: var(--dg-bg-primary);
  border: none;
  border-radius: var(--dg-radius-button);
  padding: 10px 20px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.dg-btn-primary:hover {
  background: var(--dg-gold-bright);
}

.dg-btn-secondary {
  background: transparent;
  color: var(--dg-gold);
  border: 1px solid var(--dg-gold-muted);
  border-radius: var(--dg-radius-button);
  padding: 10px 20px;
  cursor: pointer;
}

.dg-btn-secondary:hover {
  border-color: var(--dg-gold);
  background: rgba(200, 155, 60, 0.08);
}

/* ============================================
   STATUS BADGES (collection cards)
   ============================================ */

.dg-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dg-text-primary);
}

.dg-badge--humidor { background: var(--dg-status-humidor); }
.dg-badge--smoke   { background: var(--dg-status-smoke); }
.dg-badge--wishlist{ background: var(--dg-status-wishlist); }
.dg-badge--smoked  { background: var(--dg-status-smoked); }

/* ============================================
   STAR RATINGS
   ============================================ */

.dg-stars { color: var(--dg-gold-bright); font-size: 14px; }
.dg-stars .dg-star--empty { color: var(--dg-border-light); }

/* ============================================
   RATING NUMBER CHIP (top-left of cigar cards, e.g. "91 RATED")
   ============================================ */

.dg-rating-chip {
  background: var(--dg-bg-elevated);
  border: 1px solid var(--dg-gold-muted);
  border-radius: 6px;
  padding: 6px 10px;
  text-align: center;
  color: var(--dg-gold);
  font-weight: 700;
}

.dg-rating-chip small {
  display: block;
  font-size: 9px;
  color: var(--dg-text-muted);
  font-weight: 400;
}