/*
 * pantry-tokens.css — VCKC Food Pantry color palette + theme tokens.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * THIS IS THE FILE TO EDIT TO RE-SKIN THE APP.
 * ─────────────────────────────────────────────────────────────────────────
 * The church may change the background image and color palette. Everything
 * skin-related is centralized here as CSS custom properties:
 *   - the `--pantry-*` semantic tokens (the palette),
 *   - the Bootstrap `--bs-*` aliases (so Bootstrap components adopt the palette),
 *   - `--pantry-hero-image` (the splash background; desktop + mobile).
 *
 * To switch palettes: replace the values in this :root block.
 * To switch the background: change the two --pantry-hero-image values + drop
 * the new image files in public/assets/img/bg/.
 * Component styles live in pantry-theme.css and reference these tokens, so
 * they never need to change when the skin does.
 *
 * Palette source: docs/ThemeingDocs/Food_Pantry_UI_Color_Palette.pdf
 */

:root {
  /* Core brand */
  --pantry-primary: #17364A;        /* Pantry Navy — structure, navbar, headings */
  --pantry-primary-dark: #0D2533;   /* deep backgrounds, overlays */
  --pantry-primary-light: #E5EDF1;
  --pantry-secondary: #34734A;      /* Harvest Green — primary actions, success */
  --pantry-secondary-dark: #245437; /* green hover */
  --pantry-secondary-light: #E7F0E9;
  --pantry-accent: #E77932;         /* Carrot Orange — emphasis CTA */
  --pantry-accent-dark: #BD5520;    /* orange hover */
  --pantry-accent-light: #FCEBDD;
  --pantry-danger: #D94732;         /* Tomato Red — errors only */
  --pantry-warning: #D9A43A;        /* Harvest Gold — warnings */
  --pantry-beige: #DCC8A3;          /* Paper Bag Beige — decorative neutral */

  /* Surfaces & text */
  --pantry-background: #F7F3EA;      /* warm page background */
  --pantry-surface: #FFFFFF;        /* cards, forms, modals */
  --pantry-surface-muted: #EEF1ED;
  --pantry-text: #1E2A30;
  --pantry-text-muted: #68777D;
  --pantry-border: #D8DEDA;

  /* Elevation & radius */
  --pantry-shadow: 0 0.25rem 1rem rgba(13, 37, 51, 0.10);
  --pantry-shadow-lg: 0 0.75rem 2rem rgba(13, 37, 51, 0.16);
  --pantry-radius-sm: 0.375rem;
  --pantry-radius: 0.75rem;
  --pantry-radius-lg: 1.25rem;

  /* Splash/hero background — SWAP HERE (desktop default). */
  --pantry-hero-image: url('/assets/img/bg/foodPantryBG1-desktop.jpg');

  /* Bootstrap 5 aliases — map the palette onto Bootstrap's own variables so
     stock components (alerts, badges, links, etc.) pick up the brand colors. */
  --bs-primary: #17364A;
  --bs-primary-rgb: 23, 54, 74;
  --bs-secondary: #34734A;
  --bs-secondary-rgb: 52, 115, 74;
  --bs-success: #34734A;
  --bs-success-rgb: 52, 115, 74;
  --bs-warning: #D9A43A;
  --bs-warning-rgb: 217, 164, 58;
  --bs-danger: #D94732;
  --bs-danger-rgb: 217, 71, 50;
  --bs-body-color: #1E2A30;
  --bs-body-bg: #F7F3EA;
  --bs-border-color: #D8DEDA;
  --bs-link-color: #34734A;
  --bs-link-hover-color: #245437;
}

/* Phones get the portrait crop so the splash fills a tall screen without
   over-zooming the landscape framing. */
@media (max-width: 575.98px) {
  :root {
    --pantry-hero-image: url('/assets/img/bg/foodPantryBG1-mobile.jpg');
  }
}