/* ember.css — ChefLink Ember consumer theme
 *
 * Defines brand CSS custom properties and semantic classes for the
 * consumer UI. To switch themes, swap this file and redefine the same
 * class names and variables with different values.
 */

:root {
  --brand-color-surface:           #fffbeb; /* amber-50   — page background       */
  --brand-color-body-text:         #292524; /* stone-800  — body text             */
  --brand-color-nav-bg:     rgb(255 255 255 / 0.95); /* white/95 — nav background */
  --brand-color-nav-text:          #4b5563; /* gray-600   — nav item text         */
  --brand-color-nav-item-hover:    #111827; /* gray-900   — nav item hover        */
  --brand-color-nav-active:        #ea580c; /* orange-600 — active nav item       */

  /* Primary action (buttons, interactive elements) */
  --brand-color-primary:           #f59e0b; /* amber-500  — primary action bg     */
  --brand-color-primary-hover:     #fbbf24; /* amber-400  — primary action hover  */
  --brand-color-primary-dark:      #e85f0d; /* orange-600 — nav/dark accent       */

  /* Secondary / accent (text labels, prices, icons) */
  --brand-color-secondary:         #d97706; /* amber-600  — accent text, prices   */
  --brand-color-secondary-dim:     #f59e0b; /* amber-500  — dimmer icons          */

  /* Surfaces */
  --brand-color-surface-subtle:    #fef3c7; /* amber-100  — icon containers, sheet borders */
  --brand-color-selected-bg: rgb(254 243 199 / 0.5); /* amber-100/50 — modifier selected bg */

  /* Card / content surfaces */
  --brand-color-card-bg:           #ffffff;
  --brand-color-card-border:       #e7e5e4;          /* stone-200 */

  /* Text hierarchy */
  --brand-color-heading:           #1c1917;          /* stone-900 */
  --brand-color-text-muted:        #a8a29e;          /* stone-400 */

  /* Dividers */
  --brand-color-divider:           #e7e5e4;          /* stone-200 */

  /* Category pills */
  --brand-color-pill-active-bg:    #1c1917;          /* stone-900 */
  --brand-color-pill-active-text:  #ffffff;
  --brand-color-pill-bg:           #ffffff;
  --brand-color-pill-border:       #e7e5e4;          /* stone-200 */
  --brand-color-pill-text:         #44403c;          /* stone-700 */

  /* Input fields */
  --brand-color-input-bg:          #fafaf9;          /* stone-50 */
  --brand-color-input-border:      #e7e5e4;          /* stone-200 */
  --brand-color-input-text:        #1c1917;          /* stone-900 */
  --brand-color-input-placeholder: #a8a29e;          /* stone-400 */

  /* Dark action (cart button, call server) */
  --brand-color-action-bg:         #1c1917;          /* stone-900 */
  --brand-color-action-text:       #ffffff;
  --brand-color-action-hover:      #292524;          /* stone-800 */
  --brand-color-action-badge-bg:   #44403c;          /* stone-700 */
  --brand-color-action-badge-text: #d6d3d1;          /* stone-300 */

  /* Summary / receipt card */
  --brand-color-summary-bg:        #1c1917;          /* stone-900 */
  --brand-color-summary-border:    transparent;
}

/* ── Page ────────────────────────────────────────── */

.brand-page {
  background-color: var(--brand-color-surface);
  color: var(--brand-color-body-text);
}

/* ── Primary action button ───────────────────────── */

.brand-btn-primary {
  background-color: var(--brand-color-primary);
  color: #1c1917; /* stone-900 */
}
.brand-btn-primary:hover {
  background-color: var(--brand-color-primary-hover);
}

/* Generic primary background (icon circles, success states) */
.brand-bg-primary {
  background-color: var(--brand-color-primary);
}

/* ── Accent text (venue label, prices, links) ────── */

.brand-text-accent {
  color: var(--brand-color-secondary);
}
.brand-text-accent:hover {
  color: var(--brand-color-secondary-dim);
}

/* Dimmer accent (icons, secondary amounts) */
.brand-text-accent-dim {
  color: var(--brand-color-secondary-dim);
}
.brand-text-accent-dim:hover {
  color: var(--brand-color-primary-hover);
}

/* ── Surface tint (modal sheets, bottom bars) ────── */

.brand-surface-tint {
  background-color: var(--brand-color-surface);
}

.brand-surface-border {
  border-color: var(--brand-color-surface-subtle);
}

/* ── Icon containers ─────────────────────────────── */

.brand-icon-bg {
  background-color: var(--brand-color-surface-subtle);
}

/* Translucent primary badge */
.brand-icon-bg-muted {
  background-color: color-mix(in srgb, var(--brand-color-primary) 15%, transparent);
}

/* ── Input focus ─────────────────────────────────── */

.brand-input-focus:focus {
  border-color: var(--brand-color-primary-hover);
}

/* ── Hover border (landing page cards) ──────────── */

.brand-hover-border:hover {
  border-color: var(--brand-color-primary-hover);
}

/* ── Active selection state (JS-toggled tip buttons) */

.brand-selection-active {
  border-color: var(--brand-color-primary-hover);
  color: var(--brand-color-primary-hover);
}

/* ── Bottom navigation ───────────────────────────── */

.brand-nav {
  background-color: var(--brand-color-nav-bg);
}

.brand-nav-text {
  color: var(--brand-color-nav-text);
}

.brand-nav-item:hover {
  color: var(--brand-color-nav-item-hover);
}

.brand-nav-item-active {
  color: var(--brand-color-nav-active);
}

/* ── Card surfaces ───────────────────────────────── */

.brand-card {
  background-color: var(--brand-color-card-bg);
  border-color: var(--brand-color-card-border);
}

/* ── Text hierarchy ──────────────────────────────── */

.brand-text-heading {
  color: var(--brand-color-heading);
}

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

/* ── Dividers ────────────────────────────────────── */

.brand-divider {
  background-color: var(--brand-color-divider);
}

/* ── Category pills ──────────────────────────────── */

.brand-pill-active {
  background-color: var(--brand-color-pill-active-bg);
  color: var(--brand-color-pill-active-text);
}

.brand-pill {
  background-color: var(--brand-color-pill-bg);
  border-color: var(--brand-color-pill-border);
  color: var(--brand-color-pill-text);
}
.brand-pill:hover {
  border-color: var(--brand-color-primary);
}

/* ── Input fields ────────────────────────────────── */

.brand-input-field {
  background-color: var(--brand-color-input-bg);
  border-color: var(--brand-color-input-border);
  color: var(--brand-color-input-text);
}
.brand-input-field::placeholder {
  color: var(--brand-color-input-placeholder);
}

/* ── Dark action button (cart, call server) ──────── */

.brand-action-btn {
  background-color: var(--brand-color-action-bg);
  color: var(--brand-color-action-text);
}
.brand-action-btn:hover {
  background-color: var(--brand-color-action-hover);
}

/* ── Action badge (item count inside cart btn) ───── */

.brand-action-badge {
  background-color: var(--brand-color-action-badge-bg);
  color: var(--brand-color-action-badge-text);
}

/* ── Summary / receipt dark card ─────────────────── */

.brand-summary-card {
  background-color: var(--brand-color-summary-bg);
  border-color: var(--brand-color-summary-border);
}

/* ── Search result rows ──────────────────────────── */

.brand-search-hit:hover {
  background-color: color-mix(in srgb, var(--brand-color-card-border) 30%, transparent);
}

.brand-dividers > * + * {
  border-top-width: 1px;
  border-top-style: solid;
  border-color: var(--brand-color-divider);
}