/* ============================================================
   KarafooHost — Site Factory v3.0
   Template: community_market
   File: theme.css
   Purpose: CSS custom properties only. No layout here.
            site.css references these vars exclusively —
            never hardcode hex values in site.css.
   ============================================================ */

/* ------------------------------------------------------------
   ACTIVE PALETTE — Forest & Amber
   ------------------------------------------------------------ */
:root {
  /* Brand surfaces */
  --color-primary:        #1a3a2a;   /* Deep forest — nav bar + footer ONLY */
  --color-primary-mid:    #3d6b50;   /* Sage — nav links, category borders, accents */
  --color-accent:         #c9861a;   /* Amber — all CTAs, buttons, WhatsApp float */
  --color-accent-dark:    #2c1a00;   /* Deep amber — text on amber buttons */

  /* Page surfaces */
  --color-bg:             #f5f0e8;   /* Warm white — dominant page body */
  --color-card:           #fff8f0;   /* Card white — product cards, panels */
  --color-border:         #e8e0d0;   /* Subtle card/section border */

  /* Text */
  --color-text:           #1a2a1a;   /* Near-black with green undertone */
  --color-text-muted:     #5a7a5a;   /* Muted green-grey — secondary text */
  --color-text-inverse:   #ffffff;   /* White — on dark/hero surfaces */

  /* Hero */
  --hero-overlay-opacity: 0.48;      /* Adjustable per client */

  /* Glass panel (hero right column) */
  --glass-bg:             rgba(255, 255, 255, 0.10);
  --glass-border:         rgba(255, 255, 255, 0.22);
  --glass-blur:           4px;

  /* Typography */
  --font-display:         'Playfair Display', Georgia, serif;
  --font-body:            'Inter', system-ui, sans-serif;

  /* Type scale */
  --text-hero:            3rem;        /* 48px — hero headline */
  --text-section:         2rem;        /* 32px — section headings */
  --text-card-title:      1.25rem;     /* 20px — card titles */
  --text-logo:            1.375rem;    /* 22px — nav logo */
  --text-body:            1rem;        /* 16px — body copy */
  --text-nav:             0.875rem;    /* 14px — nav links */
  --text-label:           0.75rem;     /* 12px — labels, tags */
  --text-btn:             0.8125rem;   /* 13px — button text */
  --text-topbar:          0.6875rem;   /* 11px — top bar */

  /* Spacing */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4rem;

  /* Radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;

  /* Transitions */
  --transition: 0.2s ease;

  /* Layout */
  --max-width:  1200px;
  --nav-height: 64px;
}


/* ------------------------------------------------------------
   ALTERNATE PALETTE A — Terracotta & Cream
   Swap into :root to activate. Comment out Forest & Amber above.
   ------------------------------------------------------------ */
/*
:root {
  --color-primary:        #5c2d0e;
  --color-primary-mid:    #a0522d;
  --color-accent:         #d4622a;
  --color-accent-dark:    #2a0f00;
  --color-bg:             #fdf6ef;
  --color-card:           #fff9f5;
  --color-border:         #ecdcc8;
  --color-text:           #2a1a0e;
  --color-text-muted:     #7a5a40;
  --color-text-inverse:   #ffffff;
  --hero-overlay-opacity: 0.50;
  --glass-bg:             rgba(255, 245, 235, 0.12);
  --glass-border:         rgba(255, 245, 235, 0.24);
  --glass-blur:           4px;
  --font-display:         'Playfair Display', Georgia, serif;
  --font-body:            'Inter', system-ui, sans-serif;
}
*/


/* ------------------------------------------------------------
   ALTERNATE PALETTE B — Midnight & Gold
   ------------------------------------------------------------ */
/*
:root {
  --color-primary:        #0d1b2a;
  --color-primary-mid:    #1e3a5f;
  --color-accent:         #c9a84c;
  --color-accent-dark:    #1a0f00;
  --color-bg:             #f0f2f5;
  --color-card:           #ffffff;
  --color-border:         #d8dde6;
  --color-text:           #0d1b2a;
  --color-text-muted:     #5a6a7a;
  --color-text-inverse:   #ffffff;
  --hero-overlay-opacity: 0.55;
  --glass-bg:             rgba(13, 27, 42, 0.20);
  --glass-border:         rgba(201, 168, 76, 0.30);
  --glass-blur:           6px;
  --font-display:         'Playfair Display', Georgia, serif;
  --font-body:            'Inter', system-ui, sans-serif;
}
*/


/* ------------------------------------------------------------
   ALTERNATE PALETTE C — Ocean & Coral
   ------------------------------------------------------------ */
/*
:root {
  --color-primary:        #0a3d4a;
  --color-primary-mid:    #1a7a8a;
  --color-accent:         #e8612a;
  --color-accent-dark:    #1a0a00;
  --color-bg:             #f0f7f8;
  --color-card:           #ffffff;
  --color-border:         #c8dde0;
  --color-text:           #0a2a30;
  --color-text-muted:     #4a7a82;
  --color-text-inverse:   #ffffff;
  --hero-overlay-opacity: 0.45;
  --glass-bg:             rgba(10, 61, 74, 0.15);
  --glass-border:         rgba(255, 255, 255, 0.25);
  --glass-blur:           4px;
  --font-display:         'Playfair Display', Georgia, serif;
  --font-body:            'Inter', system-ui, sans-serif;
}
*/