/* ==========================================================================
   Design Tokens — Lee's Supper Club
   --------------------------------------------------------------------------
   All visual values live here as CSS custom properties so every other
   stylesheet can reference them.  Change a value once and it propagates
   everywhere.
   ========================================================================== */

:root {

	/* ------------------------------------------------------------------
	   Colors
	   ---------------------------------------------------------------- */
	--color-teal:       #064750;
	--color-green:      #bbbb01;
	--color-pink:       #bb4c7f;
	--color-red:        #a01b22;
	--color-white:      #ffffff;
	--color-black:      #1a1a1a;
	--color-gray-light: #f5f5f5;
	--color-gray:       #767676;
	--color-gray-dark:  #333333;
	--color-body-text:  #1a1a1a;
	--color-body-bg:    #ffffff;
	--color-link-hover: #bb4c7f;
	--color-footer-bg:  #064750;

	/* ------------------------------------------------------------------
	   Fonts
	   ---------------------------------------------------------------- */
	--font-primary:  'Newsreader', Georgia, serif;
	--font-headings: var(--font-primary);
	--font-nav:      var(--font-primary);
	--font-accent:   'LadyClementineScript', Georgia, serif;
	--font-cards:    'LadyClementineSerif', Georgia, serif;

	/* ------------------------------------------------------------------
	   Font Weights
	   ---------------------------------------------------------------- */
	--fw-light:    300;
	--fw-regular:  400;
	--fw-medium:   500;
	--fw-semibold: 600;
	--fw-bold:     700;

	/* ------------------------------------------------------------------
	   Spacing Scale  (based on 0.5 rem increments)
	   ---------------------------------------------------------------- */
	--space-xs:  0.5rem;   /*  8px */
	--space-sm:  1rem;     /* 16px */
	--space-md:  1.5rem;   /* 24px */
	--space-lg:  2rem;     /* 32px */
	--space-xl:  3rem;     /* 48px */
	--space-2xl: 4rem;     /* 64px */
	--space-3xl: 6rem;     /* 96px */

	/* ------------------------------------------------------------------
	   Layout
	   ---------------------------------------------------------------- */
	--container-width: 1200px;
	--hero-grid-width: 1000px;   /* homepage category photos; header content aligns to it */
	--content-width:   860px;
	--sidebar-width:   300px;
	--circle-size:     200px;
	--header-height:   100px;

	/* ------------------------------------------------------------------
	   Section Spacing
	   ---------------------------------------------------------------- */
	--space-section: 5rem;   /* 80px — consistent homepage section gaps */

	/* ------------------------------------------------------------------
	   Transitions
	   ---------------------------------------------------------------- */
	--transition-fast: 0.2s ease;
	--transition-base: 0.3s ease;
}