:root{
  --lh-body: 1.5;
	
  /*==============================
    THEME SWITCH
    Use [data-theme="dark"] on <html> to enable dark mode
  ==============================*/
  --theme: light;

  /*==============================
    COLOR PALETTE (Neutrals)
  ==============================*/
  --neutral-0: #ffffff;
  --neutral-1: #323232;
  --neutral-2: #82f732;
  --neutral-3: #dddddd;
  --neutral-4: #bdbdbd;
  --neutral-7: #5a5a5a;
  --neutral-8: #3b3b3b;
  --neutral-9: #202020;

  /*==============================
    STATUS COLORS
    success / warning / error / info
  ==============================*/
  --success-main: #2e7d32;
  --success-light: #4caf50;
  --success-dark: #1b5e20;

  --warning-main: #f9a825;
  --warning-light: #ffd54f;
  --warning-dark: #f57f17;

  --error-main: #d32f2f;
  --error-light: #ef5350;
  --error-dark: #b71c1c;

  --info-main: #0277bd;
  --info-light: #039be5;
  --info-dark: #01579b;

  /*==============================
    BRAND / PRIMARY
  ==============================*/
  --primary-main: #82f732;
  --primary-light: #1f1f1f;
  --primary-dark: #202020;
  --main-color: #323232;	

  /*==============================
    THEME-DEPENDENT TOKENS
  ==============================*/
  --bg-main: var(--neutral-0);
  --text-main: var(--neutral-1);
  --text-strong: var(--neutral-9);
  --text-white: #ffffff;
  --text-black: #000000;	

  --border-subtle: var(--neutral-2);
  --border-soft: var(--neutral-3);

  /* Backwards-compatible aliases (existing CSS uses these) */
  --main-text: var(--text-main);
  --main-text-2: var(--text-strong);
  --bg-white: #ffffff;
  --bg-black: #000000;
  --bg-grey: #f9f9f9;	
  --bg-maroon: #2e0200;	
  --border-subtle-2: var(--border-subtle);

  /*==============================
    RADIUS
  ==============================*/
  --radius:50px;
  --radius-sm: 2px;
  --radius-md: 10px;
  --radius-pill: 999px;

  /*==============================
    SPACING
  ==============================*/
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 25px;
  --space-7: 30px;
  --space-8: 35px;
  --space-9: 40px;
  --space-section-padding:120px 0;	

  /*==============================
    TYPOGRAPHY
  ==============================*/
  --font-body: 'Open Sans';
  --ff-primary: 'Open Sans';	
  --font-title: 'Playfair Display';
  --ff-style: 'GT America Arabic VF';
  --font-arial: 'arial';
  --font-nav: inherit;

  --fs-body: 1rem;	
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-md: 13px;
  --font-size-lg: 16px;

  /* Higher-level typography (used across headings/titles/subtitles/links) */
  --font-size-title:3rem;
  --font-size-subtitle: 16px;
  --font-size-heading: 16px;
  --font-size-link: 13px;

  /* Section heading scale */
  --font-size-h1: 32px;
  --font-size-h2: 24px;
  --font-size-h3: 18px;
  --font-size-h4: 16px;
	
  /* Letter Spacing */
  --letter-space-1: 1px;
  --letter-space-2: 2px;
  --letter-space-3: 3px;
  --letter-space-4: 4px;
  --letter-space-5: 5px;	

  /* Mega-menu specific text sizing */
  --font-size-mega-title: 13px;
  --font-size-mega-link: 12px;

  /*==============================
    BORDERS
  ==============================*/
  --border-color: var(--border-subtle);
  --border-color-soft: var(--border-soft);

  /*==============================
    SHADOWS
  ==============================*/
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.10);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 35px 90px rgba(0, 0, 0, 0.14);

  /* Backwards-compatible alias */
  --shadow-soft: var(--shadow-md);
	
  /*==============================
    Background
  ==============================*/	
  --fill-green: #76c143;

  /*==============================
    LAYERING
  ==============================*/
  --z-header: 999;
  --z-dropdown: 9999;
}

/* Dark theme overrides */
html[data-theme="dark"]{
  --bg-main: #0f1216;
  --text-main: #b8c0cc;
  --text-strong: #e6e9ee;

  --neutral-0: #0f1216;
  --neutral-1: #141a22;
  --neutral-2: #202738;
  --neutral-3: #2a3547;

  --border-subtle: var(--neutral-2);
  --border-soft: var(--neutral-3);

  --main-text: var(--text-main);
  --main-text-2: var(--text-strong);
  --bg-white: var(--bg-main);
}