:root {
  /* Theme Variables */
  --box-border-radius: 1.25em;
  --shape-border-width: 0.125em;
  --line-thickness: 1px;
  --button-border-radius: 8em;
  --shape-shadow: none;
  --clickable-shadow: 0 0.125em 0.25em -0.0625em rgba(0, 0, 0, 0.06);
  
  /* Typography */
  --heading-font: 'Nunito', sans-serif;
  --body-font: 'Roboto', sans-serif;
  --heading-font-weight: 400;
  --body-font-weight: 300;
  --line-height-body: 1.6;
  --line-height-heading: 1.25;
  --letter-spacing-body: 0;
  --letter-spacing-heading: -0.02em;
  
  /* Colors */
  /* Brand Colors */
  --brand-golden: #F2B42D;
  --brand-coral: #FF6B6B;
  --brand-turquoise: #4ECDC4;
  
  /* Numbered Bullets Colors */
  --bullet-color-1: var(--brand-golden);
  --bullet-color-2: var(--brand-coral);
  --bullet-color-3: var(--brand-turquoise);
  --bullet-color-4: var(--brand-golden);
  --bullet-color-5: var(--brand-coral);
  
  /* Accent and UI Colors */
  --accent-color: var(--brand-golden);
  --accent-color-readable: var(--brand-golden);
  --accent-color-background-muted: #483304;
  --expandable-hover-background: #f2b42d1a;
  --neutral-border-color: rgba(255, 255, 255, 0.24);
  --button-color: #F2B42D;
  --button-color-inverted: #000;
  --link-color: #F2B42D;
  --link-color-hover: #de9d0eff;
  --link-box-shadow: 0 0 0px 3px #f2b42dff;
  --body-color: #FFFFFF;
  --body-color-muted: rgba(255, 255, 255, 0.7);
  --body-color-inverted: #000;
  --link-color-inverted: #000;
  --highlight-color-dark: var(--body-color);
  --highlight-color-light: var(--body-color-inverted);
  --highlight-link-color-hover-dark: #e6e6e6ff;
  --highlight-link-color-hover-light: #1a1a1aff;
  --heading-color: #FFFFFF;
  --card-color: rgba(0, 0, 46, 0.95);
  --card-color-mask: #00002ecc;
  --card-border-color: rgba(230, 230, 230, 0.25);
  
  /* Placeholder Colors */
  --placeholder-button-bg-color: var(--chakra-colors-gray-800);
  --placeholder-button-bg-hover-color: var(--chakra-colors-gray-600);
  --placeholder-button-text-color: var(--chakra-colors-gray-300);
  --placeholder-button-text-hover-color: var(--chakra-colors-gray-200);
  
  /* Layout */
  --card-border-radius: 2em;
  --card-padding: 1.5em;
  --card-border-width: 0.25em;
  
  /* Effects */
  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --hover-transition: all 0.2s ease;
  
  /* Spacing */
  --section-spacing: 4em;
  --element-spacing: 1em;
}

/* Dark theme overrides if needed */
[data-theme="dark"] {
  /* Add dark theme variables here if needed */
}