/* ============================================================
   ETHIOPIAN COFFEE BEANS — variables.css
   THE ONLY FILE YOU NEED TO EDIT FOR COLORS & FONTS
   ============================================================ */

:root {
  /* --- Brand Colors --- */
  --color-background:     #F9F7F2;   /* warm white page background */
  --color-surface:        #F3F0EB;   /* card / section backgrounds */
  --color-surface-dark:   #EDE8E0;   /* deeper surface, hover states */
  --color-primary:        #1A1A1A;   /* headlines, body text */
  --color-accent-brown:   #8B4513;   /* links, tags, active nav — espresso */
  --color-accent-gold:    #C8972A;   /* CTA buttons, highlights, hover */
  --color-accent-gold-dk: #A87820;   /* gold hover/active state */
  --color-accent-green:   #3B6B4A;   /* region tags, specialty labels */
  --color-border:         #DDD8D0;   /* dividers, card borders */
  --color-text:           #1A1A1A;   /* body copy */
  --color-text-light:     #6B6560;   /* meta, captions, bylines, dates */
  --color-text-inverse:   #FAFAF7;   /* text on dark backgrounds */
  --color-topbar:         #1A1A1A;   /* masthead topbar background */
  --color-nav:            #FFFFFF;   /* main nav background */
  --color-categorybar:    #F3F0EB;   /* category bar background */
  --color-masthead-bg:    #F9F7F2;   /* large masthead background */

  /* --- Typography --- */
  --font-headline: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:     'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-ui:       'DM Sans', system-ui, sans-serif;

  /* --- Font Sizes --- */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  1.875rem;   /* 30px */
  --text-3xl:  2.25rem;    /* 36px */
  --text-4xl:  3rem;       /* 48px */
  --text-5xl:  3.75rem;    /* 60px — lead headline */
  --text-6xl:  5.75rem;    /* 92px — masthead title */

  /* --- Spacing --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* --- Layout --- */
  --max-width:          1200px;
  --content-width:      720px;
  --sidebar-width:      300px;
  --nav-height:         72px;
  --topbar-height:      36px;
  --categorybar-height: 40px;

  /* --- Borders & Radius --- */
  --radius-sm:  3px;
  --radius-md:  6px;
  --radius-lg:  12px;
  --border:     1px solid var(--color-border);

  /* --- Shadows --- */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.12);

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