/*
 * ============================================================
 *  BOTTOLA AI — DESIGN TOKENS
 *  Edit this file to retheme the entire site.
 * ============================================================
 */

:root {

  /* ── Brand Colors ────────────────────────────────────────
   * Primary palette. Change --accent to switch the brand hue.
   * --grad is the CTA / headline gradient (two-stop).
   */
  --accent:        #63cf49;   /* primary green */
  --accent-hover:  #4caf50;   /* darker on hover */
  --accent-glow:   #7cff35;   /* bright for gradients */
  --grad:          linear-gradient(135deg, #7cff35, #43d61a);

  /* ── Backgrounds ─────────────────────────────────────────
   * Dark-green theme. Lighten these for a lighter variant.
   */
  --bg:            #060d06;   /* page background */
  --surface:       #0e2410;   /* cards, panels */
  --surface-el:    #152815;   /* elevated cards (hover state) */
  --surface-dark:  #050c04;   /* footer, form inputs */

  /* ── Borders ─────────────────────────────────────────────*/
  --border-sub:    #1e3d1e;   /* subtle borders */
  --border-str:    #2a5230;   /* strong borders */

  /* ── Typography ──────────────────────────────────────────
   * Change the @import in index.html and --font-* below
   * to switch typefaces.
   */
  --font-body:     'Lucida Console', 'Courier New', monospace;
  --text:          #e8f5e9;   /* primary text */
  --text-sec:      #9ab89a;   /* secondary / body copy */
  --text-muted:    #678067;   /* captions, placeholders */

  /* ── Semantic Colors ─────────────────────────────────────*/
  --gold:          #ffd54f;   /* star ratings */
  --error:         #f87171;
  --warn:          #fbbf24;
  --info:          #60a5fa;
  --success:       #34d399;

  /* ── Shape ───────────────────────────────────────────────*/
  --r-sm:          8px;
  --r-md:          12px;
  --r-lg:          16px;
  --r-pill:        999px;

  /* ── Shadows ─────────────────────────────────────────────*/
  --shadow-card:   0 2px 12px rgba(0,0,0,.35);
  --shadow-el:     0 4px 20px rgba(0,0,0,.4);
  --shadow-btn:    0 2px 8px rgba(76,175,80,.25);

  /* ── Spacing Scale (8px base) ────────────────────────────
   * Used across padding / gap / margin.
   */
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  40px;
  --sp-6:  48px;
  --sp-8:  64px;
  --sp-10: 80px;
  --sp-12: 96px;
}