/* =====================================================================
   ZAMINI STORE — BRAND COLORS (single source of truth)
   =====================================================================
   Every page and every component's CSS should reference these
   variables instead of hardcoded hex values. To change the site's
   look later, edit ONLY this file — every page picks it up.

   One green hue, stepped from lightest (50) to darkest (900).
   ===================================================================== */

:root {

  /* ---- Raw ramp — one hue, ten steps light to dark ---- */
  --color-50:  #eef5ea; /* lightest tint  — card backgrounds, hover highlights   */
  --color-100: #d7e8d1; /* light tint     — subtle backgrounds, soft borders     */
  --color-200: #b8d4b0; /* light-mid      — tab bars, dividers on light bg       */
  --color-300: #8fb885; /* mid-light      — secondary icons/text on dark bg      */
  --color-400: #6ea86b; /* BRAND ACCENT   — buttons, links, active states        */
  --color-500: #4a8a52; /* mid            — hover states on the accent           */
  --color-600: #3c6b47; /* mid-dark       — borders/dividers on dark surfaces    */
  --color-700: #2c5236; /* dark           — muted text on dark, deep accents     */
  --color-800: #1f3d28; /* darker         — header / footer / panel backgrounds  */
  --color-900: #102015; /* darkest        — logo circle, image wrapper, deepest  */

  /* ---- Purpose-named aliases — use these in your CSS, not the raw ramp ---- */
  --color-page-bg:        #f4f8f1; /* page background                     */
  --color-text-main:      #14251a; /* body text on light backgrounds      */
  --color-text-muted:     var(--color-200); /* muted text on dark surfaces */

  --color-surface-dark:   var(--color-800); /* header / footer / active tab / panels */
  --color-surface-darker: var(--color-900); /* logo, image wrapper, deepest pockets   */
  --color-border:         var(--color-600); /* divider / border line                 */

  --color-tabs-bg:        var(--color-200); /* tab bar background   */
  --color-tab-border:     var(--color-100); /* divider between tabs */

  --color-accent:          var(--color-400); /* buttons, highlights, active states */
  --color-accent-rgb:      110, 168, 107;    /* same color, for rgba() glows       */
  --color-on-accent:       var(--color-900); /* text sitting on top of the accent  */
  --color-on-accent-muted: var(--color-800); /* smaller text on the accent         */

  /* ---- Semantic colors — meaning-based, kept OUTSIDE the brand hue on purpose ----
     These stay red/green/amber regardless of brand color, because they signal
     something (error, success, warning) rather than decorate. Don't fold them
     into the green ramp above. */
  --color-success: #2e7d32;
  --color-error:   #c62828;
  --color-warning: #d4af37;
}