/* =============================================================
   CANASTA BD · Brand stylesheet
   -------------------------------------------------------------
   - Palette tokens (terracotta, olive, wheat, cream, charcoal)
   - Typography (Fraunces display + Inter Tight UI + JetBrains Mono)
   - Bootstrap 5.3 overrides via CSS variables
   - Custom components (logo, score badges, hero, etc.)
   ============================================================= */

/* ---------- Brand tokens ---------- */
:root {
  /* Earthy, food-honest palette */
  --c-terracotta:        #c96442;     /* oklch(63% .14 38)   — primary action / G3 */
  --c-terracotta-deep:   #a85234;     /* hover state */
  --c-olive:             #6b7a3a;     /* oklch(50% .08 115)  — accent / G1 / "approved" */
  --c-olive-deep:        #556230;
  --c-wheat:             #d9bf7a;     /* oklch(80% .08 85)   — G2 / soft warning */
  --c-wheat-deep:        #c4a85f;
  --c-cream:             #f4ede0;     /* oklch(94% .02 80)   — surface */
  --c-cream-deep:        #ebe0cc;     /* hover surface */
  --c-charcoal:          #2a251f;     /* oklch(22% .01 60)   — ink / G4 */
  --c-charcoal-soft:     #4a4239;     /* secondary text */

  /* Group palette (G1..G4) — earthy muted tones, intentionally non-vibrant.
     Used in charts, badges, and group-tinted borders. */
  --c-group-1:           #7C9266;     /* sage */
  --c-group-2:           #D4B26A;     /* mustard */
  --c-group-3:           #C97A4F;     /* terracotta */
  --c-group-4:           #A14A3F;     /* brick */

  /* Translucent neutrals */
  --c-charcoal-08:       rgba(42, 37, 31, 0.08);
  --c-charcoal-16:       rgba(42, 37, 31, 0.16);

  /* Typography */
  --font-display:  'Fraunces', 'Times New Roman', Georgia, serif;
  --font-ui:       'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------- Bootstrap 5.3 variable overrides ---------- */
  --bs-body-bg:          var(--c-cream);
  --bs-body-color:       var(--c-charcoal);
  --bs-body-font-family: var(--font-ui);
  --bs-font-monospace:   var(--font-mono);
  --bs-border-color:     var(--c-charcoal-16);
  --bs-border-radius:    0.5rem;
  --bs-border-radius-sm: 0.375rem;
  --bs-border-radius-lg: 0.75rem;

  /* Primary = Terracotta (brand action color) */
  --bs-primary:                #c96442;
  --bs-primary-rgb:            201, 100, 66;
  --bs-primary-bg-subtle:      #f5dccf;
  --bs-primary-border-subtle:  #e9b7a0;
  --bs-primary-text-emphasis:  #7c3d27;

  /* Success = Olive (truly "good" things) */
  --bs-success:                #6b7a3a;
  --bs-success-rgb:            107, 122, 58;
  --bs-success-bg-subtle:      #e3e7d2;
  --bs-success-border-subtle:  #c7d0a4;
  --bs-success-text-emphasis:  #424c23;

  /* Warning = Wheat */
  --bs-warning:                #d9bf7a;
  --bs-warning-rgb:            217, 191, 122;
  --bs-warning-bg-subtle:      #f6efd9;
  --bs-warning-border-subtle:  #ecd9a8;
  --bs-warning-text-emphasis:  #82682b;

  /* Info = Wheat-light (used for neutral-positive callouts) */
  --bs-info:                   #d9bf7a;
  --bs-info-rgb:               217, 191, 122;
  --bs-info-bg-subtle:         #f6efd9;
  --bs-info-border-subtle:     #ecd9a8;
  --bs-info-text-emphasis:     #82682b;

  /* Danger = darker terracotta */
  --bs-danger:                 #a85234;
  --bs-danger-rgb:             168, 82, 52;
  --bs-danger-bg-subtle:       #f0d4c7;
  --bs-danger-border-subtle:   #dba390;
  --bs-danger-text-emphasis:   #6b3320;

  /* Secondary = charcoal-soft */
  --bs-secondary:              #4a4239;
  --bs-secondary-rgb:          74, 66, 57;
  --bs-secondary-color:        #4a4239;
  --bs-secondary-bg:           var(--c-cream-deep);
}

/* ---------- Base typography ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-ui);
  background-color: var(--c-cream);
  color: var(--c-charcoal);
  font-feature-settings: 'cv11', 'ss01';
}

h1, h2, h3, h4, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--c-charcoal);
}
h1 { font-weight: 600; }
h2 { font-weight: 600; }
h5, h6 { font-family: var(--font-ui); font-weight: 600; letter-spacing: -0.005em; }

.text-muted, .text-secondary { color: var(--c-charcoal-soft) !important; }

.font-display { font-family: var(--font-display) !important; }
.font-ui      { font-family: var(--font-ui) !important; }
.font-mono    { font-family: var(--font-mono) !important; }
.font-monospace { font-family: var(--font-mono) !important; }

small, .small, .form-text, .text-uppercase[class*="small"] {
  letter-spacing: 0.005em;
}

/* ---------- Navbar ---------- */
.navbar {
  background-color: var(--c-cream) !important;
  border-bottom: 1px solid var(--c-charcoal-08);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.navbar .nav-link,
.navbar .navbar-brand,
.navbar-text {
  color: var(--c-charcoal) !important;
}
.navbar .nav-link:hover { color: var(--c-terracotta) !important; }
.navbar .nav-link.active { color: var(--c-terracotta) !important; font-weight: 500; }
.navbar .dropdown-menu {
  background-color: var(--c-cream);
  border: 1px solid var(--c-charcoal-16);
  border-radius: 0.5rem;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background-color: var(--c-cream-deep);
  color: var(--c-charcoal);
}

/* ---------- Buttons ---------- */
.btn {
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: 0.5rem;
  transition: all .15s ease;
}
.btn-success, .btn-primary {
  background-color: var(--c-terracotta);
  border-color: var(--c-terracotta);
  color: #fff;
}
.btn-success:hover, .btn-success:focus,
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--c-terracotta-deep);
  border-color: var(--c-terracotta-deep);
  color: #fff;
}
.btn-outline-success, .btn-outline-primary {
  color: var(--c-terracotta);
  border-color: var(--c-terracotta);
}
.btn-outline-success:hover, .btn-outline-primary:hover {
  background-color: var(--c-terracotta);
  border-color: var(--c-terracotta);
  color: #fff;
}

/* "Approve / commit" — olive button when we need a distinct positive state */
.btn-olive {
  background-color: var(--c-olive);
  border-color: var(--c-olive);
  color: #fff;
}
.btn-olive:hover {
  background-color: var(--c-olive-deep);
  border-color: var(--c-olive-deep);
  color: #fff;
}

.btn-outline-secondary {
  color: var(--c-charcoal);
  border-color: var(--c-charcoal-16);
}
.btn-outline-secondary:hover {
  background-color: var(--c-charcoal);
  border-color: var(--c-charcoal);
  color: var(--c-cream);
}

/* ---------- Cards ---------- */
.card {
  background-color: #fff;
  border: 1px solid var(--c-charcoal-08);
  border-radius: 0.75rem;
}
.card.border-0 { border: none; }
.card .card-body h2.h5, .card .card-body h2.h6 {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* ---------- Forms ---------- */
.form-control, .form-select {
  background-color: #fff;
  border: 1px solid var(--c-charcoal-16);
  color: var(--c-charcoal);
  border-radius: 0.5rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--c-terracotta);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.18);
}
.form-check-input:checked {
  background-color: var(--c-terracotta);
  border-color: var(--c-terracotta);
}
.form-label { font-weight: 500; color: var(--c-charcoal); }

/* ---------- Logo ---------- */
.canasta-logo-word {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

/* ---------- Score badges (G1..G4) ---------- */
/* Override Bootstrap's text-bg-* utilities used in score_badge.ejs.
   The semantics: G1 olive (best), G2 wheat, G3 terracotta, G4 charcoal. */
.score-badge,
.text-bg-group-1,
.text-bg-group-2,
.text-bg-group-3,
.text-bg-group-4 {
  font-weight: 500;
  letter-spacing: -0.005em;
}
.text-bg-group-1 { background-color: var(--c-group-1) !important; color: #fff !important; }
.text-bg-group-2 { background-color: var(--c-group-2) !important; color: var(--c-charcoal) !important; }
.text-bg-group-3 { background-color: var(--c-group-3) !important; color: #fff !important; }
.text-bg-group-4 { background-color: var(--c-group-4) !important; color: #fff !important; }

/* Progress bars per group */
.progress-bar.bg-group-1 { background-color: var(--c-group-1) !important; }
.progress-bar.bg-group-2 { background-color: var(--c-group-2) !important; }
.progress-bar.bg-group-3 { background-color: var(--c-group-3) !important; }
.progress-bar.bg-group-4 { background-color: var(--c-group-4) !important; }

/* Tinted card borders per group (for the group cards in home.ejs) */
.card.border-group-1 { border-color: var(--c-group-1) !important; }
.card.border-group-2 { border-color: var(--c-group-2) !important; }
.card.border-group-3 { border-color: var(--c-group-3) !important; }
.card.border-group-4 { border-color: var(--c-group-4) !important; }

/* ---------- Tables ---------- */
.table {
  --bs-table-color:       var(--c-charcoal);
  --bs-table-bg:          transparent;
  --bs-table-border-color: var(--c-charcoal-08);
  --bs-table-striped-bg:  var(--c-cream-deep);
  --bs-table-hover-bg:    var(--c-cream-deep);
}
.table thead th {
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: var(--c-charcoal-soft);
  text-transform: uppercase;
  border-bottom: 1px solid var(--c-charcoal-16);
}

/* ---------- Alerts ---------- */
.alert {
  border-radius: 0.5rem;
  border-width: 1px;
}
.alert-success {
  background-color: var(--bs-success-bg-subtle);
  border-color: var(--bs-success-border-subtle);
  color: var(--bs-success-text-emphasis);
}
.alert-warning {
  background-color: var(--bs-warning-bg-subtle);
  border-color: var(--bs-warning-border-subtle);
  color: var(--bs-warning-text-emphasis);
}
.alert-danger {
  background-color: var(--bs-danger-bg-subtle);
  border-color: var(--bs-danger-border-subtle);
  color: var(--bs-danger-text-emphasis);
}

/* ---------- Hero / landing accents ---------- */
.brand-hero {
  background:
    radial-gradient(ellipse at top right, rgba(217, 191, 122, 0.25), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(107, 122, 58, 0.12), transparent 60%),
    var(--c-cream);
  border: 1px solid var(--c-charcoal-08);
}

.brand-accent-line {
  display: inline-block;
  width: 3rem;
  height: 3px;
  background-color: var(--c-terracotta);
  border-radius: 2px;
}

/* ---------- Auth pages (login/register) ---------- */
.auth-wrap {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.auth-card {
  background-color: #fff;
  border-radius: 1rem;
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 8px 32px var(--c-charcoal-08);
  border: 1px solid var(--c-charcoal-08);
}

/* ---------- Footer ---------- */
footer.app-footer {
  background-color: transparent;
  border-top: 1px solid var(--c-charcoal-08);
  color: var(--c-charcoal-soft);
  padding: 1.5rem 0;
  margin-top: 3rem;
  font-size: 0.875rem;
}

/* ---------- Utility ---------- */
.cursor-pointer { cursor: pointer; }
.bg-cream       { background-color: var(--c-cream) !important; }
.bg-cream-deep  { background-color: var(--c-cream-deep) !important; }
.bg-terracotta  { background-color: var(--c-terracotta) !important; color: #fff !important; }
.bg-olive       { background-color: var(--c-olive) !important; color: #fff !important; }
.bg-wheat       { background-color: var(--c-wheat) !important; color: var(--c-charcoal) !important; }
.text-terracotta { color: var(--c-terracotta) !important; }
.text-olive      { color: var(--c-olive) !important; }
.text-charcoal   { color: var(--c-charcoal) !important; }

/* ---------- Product cards (grid view) ---------- */
.product-card {
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  background-color: #fff;
}
.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--c-charcoal-08) !important;
}
.product-img {
  aspect-ratio: 4/3;
  object-fit: cover;
  background-color: var(--c-cream-deep);
  border-bottom: 1px solid var(--c-charcoal-08);
}
.product-img-placeholder {
  aspect-ratio: 4/3;
  background-color: var(--c-cream-deep);
  border-bottom: 1px solid var(--c-charcoal-08);
}

/* ---------- Subtle scroll improvements ---------- */
::selection {
  background-color: rgba(var(--bs-primary-rgb), 0.28);
  color: var(--c-charcoal);
}