:root {
  /* Base Font Families */
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Merriweather', serif;
  --font-quote: 'Georgia', serif;

  /* Spacing Variables */
  --spacing-paragraph: 1.2em;
  --spacing-section: 2.4em;

  /* ===== Yang (Sunny) Theme Variables ===== */

  /* Primary Colors - Warmer, more vibrant orange tones */
  --yang-primary: #E6963E;          /* Deeper, more saturated orange */
  --yang-primary-light: #F4B978;    /* Lighter, warmer orange */
  --yang-primary-dark: #D07D29;     /* Darker, richer orange */

  /* Accent Colors - Enhanced blue tones */
  --yang-accent: #2D5C8F;           /* Deeper blue for better contrast */
  --yang-accent-light: #4A7CB1;     /* Lighter, brighter blue */
  --yang-accent-dark: #1A4375;      /* Darker, richer blue */

  /* Neutral Colors - Warmer, less clinical whites */
  --yang-white: #FBF7F0;            /* Warmer off-white with slight yellow tint */
  --yang-gray-50: #F8F5F0;          /* Very light, almost white */
  --yang-gray-100: #F0EAE0;         /* Warmer very light gray */
  --yang-gray-200: #DDD6C9;         /* Warmer light gray */
  --yang-gray-300: #BFB9AD;         /* Warmer medium gray */
  --yang-gray-400: #9D988D;         /* Warmer dark gray */
  --yang-gray-500: #7A756D;         /* Warmer darker gray */
  --yang-gray-600: #5C5650;         /* Warmer even darker gray */
  --yang-gray-700: #474239;         /* Warmer very dark gray */
  --yang-gray-800: #3A3631;         /* Warmer near-black */
  --yang-black: #403C38;            /* Warmer near-black */

  /* ===== Yin (Shady) Theme Variables ===== */

  /* Primary Colors - More vibrant blues with greater range */
  --yin-primary: #5F82BA;           /* Brighter, more vibrant blue */
  --yin-primary-light: #7C9BCF;     /* Lighter, more vibrant blue */
  --yin-primary-dark: #3A5D96;      /* Deeper navy blue */

  /* Accent Colors - Enhanced orange and gold tones */
  --yin-accent: #F4A261;            /* Original warm orange */
  --yin-accent-light: #FABF8C;      /* Lighter, warmer orange */
  --yin-accent-dark: #E7853A;       /* Deeper, richer orange */

  /* Neutral Colors - Gradient-friendly dark colors */
  --yin-white: #EEF2F7;             /* Slightly bluer white for dark mode */
  --yin-gray-50: #F1F5F9;           /* Very light blue-gray */
  --yin-gray-100: #DCE3ED;          /* Light blue-gray */
  --yin-gray-200: #BDC9D9;          /* Medium blue-gray */
  --yin-gray-300: #94A3B8;          /* Medium-dark blue-gray */
  --yin-gray-400: #64748B;          /* Dark blue-gray */
  --yin-gray-500: #475569;          /* Darker blue-gray */
  --yin-gray-600: #334155;          /* Even darker blue-gray */
  --yin-gray-700: #1E293B;          /* Very dark blue-gray (same as yin-black) */
  --yin-gray-800: #0F172A;          /* Near-black blue-gray */
  --yin-black: #1E293B;             /* Navy-black, not pure black */

  /* Dark mode background gradient colors */
  --yin-gradient-top: #1E293B;      /* Same as yin-black */
  --yin-gradient-bottom: #2D3C50;   /* Slightly lighter for gradient effect */

  /* ===== Shared Functional Colors ===== */

  --feedback-success: #4ADE80;      /* Brighter green */
  --feedback-warning: #FB923C;      /* Brighter orange */
  --feedback-error: #F87171;        /* Brighter red */
  --feedback-info: #60A5FA;         /* Brighter blue */
}

/* Define Tailwind utility classes that use these variables */
@layer utilities {
  /* Yang Theme Typography Utilities */
  .text-yang-primary { color: var(--yang-primary); }
  .text-yang-primary-light { color: var(--yang-primary-light); }
  .text-yang-primary-dark { color: var(--yang-primary-dark); }
  .text-yang-accent { color: var(--yang-accent); }
  .text-yang-accent-light { color: var(--yang-accent-light); }
  .text-yang-accent-dark { color: var(--yang-accent-dark); }
  .text-yang-white { color: var(--yang-white); }
  .text-yang-gray-100 { color: var(--yang-gray-100); }
  .text-yang-gray-200 { color: var(--yang-gray-200); }
  .text-yang-gray-300 { color: var(--yang-gray-300); }
  .text-yang-gray-400 { color: var(--yang-gray-400); }
  .text-yang-gray-500 { color: var(--yang-gray-500); }
  .text-yang-black { color: var(--yang-black); }

  /* Yin Theme Typography Utilities */
  .text-yin-primary { color: var(--yin-primary); }
  .text-yin-primary-light { color: var(--yin-primary-light); }
  .text-yin-primary-dark { color: var(--yin-primary-dark); }
  .text-yin-accent { color: var(--yin-accent); }
  .text-yin-accent-light { color: var(--yin-accent-light); }
  .text-yin-accent-dark { color: var(--yin-accent-dark); }
  .text-yin-white { color: var(--yin-white); }
  .text-yin-gray-100 { color: var(--yin-gray-100); }
  .text-yin-gray-200 { color: var(--yin-gray-200); }
  .text-yin-gray-300 { color: var(--yin-gray-300); }
  .text-yin-gray-400 { color: var(--yin-gray-400); }
  .text-yin-gray-500 { color: var(--yin-gray-500); }
  .text-yin-black { color: var(--yin-black); }

  /* Yang Theme Background Utilities */
  .bg-yang-primary { background-color: var(--yang-primary); }
  .bg-yang-primary-light { background-color: var(--yang-primary-light); }
  .bg-yang-primary-dark { background-color: var(--yang-primary-dark); }
  .bg-yang-accent { background-color: var(--yang-accent); }
  .bg-yang-accent-light { background-color: var(--yang-accent-light); }
  .bg-yang-accent-dark { background-color: var(--yang-accent-dark); }
  .bg-yang-white { background-color: var(--yang-white); }
  .bg-yang-gray-50 { background-color: var(--yang-gray-50); }
  .bg-yang-gray-100 { background-color: var(--yang-gray-100); }
  .bg-yang-gray-200 { background-color: var(--yang-gray-200); }
  .bg-yang-gray-300 { background-color: var(--yang-gray-300); }
  .bg-yang-gray-400 { background-color: var(--yang-gray-400); }
  .bg-yang-gray-500 { background-color: var(--yang-gray-500); }
  .bg-yang-gray-600 { background-color: var(--yang-gray-600); }
  .bg-yang-gray-700 { background-color: var(--yang-gray-700); }
  .bg-yang-gray-800 { background-color: var(--yang-gray-800); }
  .bg-yang-black { background-color: var(--yang-black); }

  /* Yin Theme Background Utilities */
  .bg-yin-primary { background-color: var(--yin-primary); }
  .bg-yin-primary-light { background-color: var(--yin-primary-light); }
  .bg-yin-primary-dark { background-color: var(--yin-primary-dark); }
  .bg-yin-accent { background-color: var(--yin-accent); }
  .bg-yin-accent-light { background-color: var(--yin-accent-light); }
  .bg-yin-accent-dark { background-color: var(--yin-accent-dark); }
  .bg-yin-white { background-color: var(--yin-white); }
  .bg-yin-gray-50 { background-color: var(--yin-gray-50); }
  .bg-yin-gray-100 { background-color: var(--yin-gray-100); }
  .bg-yin-gray-200 { background-color: var(--yin-gray-200); }
  .bg-yin-gray-300 { background-color: var(--yin-gray-300); }
  .bg-yin-gray-400 { background-color: var(--yin-gray-400); }
  .bg-yin-gray-500 { background-color: var(--yin-gray-500); }
  .bg-yin-gray-600 { background-color: var(--yin-gray-600); }
  .bg-yin-gray-700 { background-color: var(--yin-gray-700); }
  .bg-yin-gray-800 { background-color: var(--yin-gray-800); }
  .bg-yin-black { background-color: var(--yin-black); }

  /* Gradient Background Utilities */
  .bg-yin-gradient {
    background: linear-gradient(to bottom, var(--yin-gradient-top), var(--yin-gradient-bottom));
  }

  /* Border utilities */
  .border-yang-primary { border-color: var(--yang-primary); }
  .border-yin-primary { border-color: var(--yin-primary); }

  /* Font utilities */
  .font-heading { font-family: var(--font-heading); }
  .font-body { font-family: var(--font-body); }
  .font-quote { font-family: var(--font-quote); }

  /* Spacing utilities */
  .space-y-paragraph > * + * { margin-top: var(--spacing-paragraph); }
  .space-y-section > * + * { margin-top: var(--spacing-section); }

  .border-yang-gray-600 { border-color: var(--yang-gray-600); }
  .border-yang-gray-700 { border-color: var(--yang-gray-700); }

  .border-yin-gray-600 { border-color: var(--yin-gray-600); }
  .border-yin-gray-700 { border-color: var(--yin-gray-700); }
}

/* Typography base styles with improved sizing and weights */
.prose-headings\:font-heading {
  font-family: var(--font-heading);
}

.prose-headings\:text-yang-black {
  color: var(--yang-black);
}

.prose-headings\:text-yin-black {
  color: var(--yin-black);
}

.prose-p\:text-yang-gray-500 {
  color: var(--yang-gray-500);
}

.prose-p\:text-yin-gray-500 {
  color: var(--yin-gray-500);
}

.prose-p\:font-body {
  font-family: var(--font-body);
}

.prose {
  max-width: 65ch;
  line-height: 1.8; /* Increased from 1.6 for better readability */
}

.prose p {
  margin-bottom: 1.5em;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  margin-top: 1.5em;
  margin-bottom: 0.85em; /* Increased from 0.75em */
}

/* Improved text size utilities with better progression */
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-base {
  font-size: 1rem;
  line-height: 1.6rem; /* Increased from 1.5rem */
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.85rem; /* Increased from 1.75rem */
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2.1rem; /* Increased from 2rem */
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.35rem; /* Increased from 2.25rem */
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.65rem; /* Increased from 2.5rem */
}

/* Dark mode specific enhanced contrast for headings */
.dark .prose h1,
.dark .prose h2,
.dark .prose h3,
.dark .prose h4,
.dark h1,
.dark h2,
.dark h3,
.dark h4 {
  font-weight: 700; /* Bolder in dark mode for better visibility */
}

/* Enhanced font weights for headings */
h1, .h1 {
  font-weight: 800; /* Extra bold */
  letter-spacing: -0.025em; /* Slight tightening for headings */
}

h2, .h2 {
  font-weight: 700; /* Bold */
  letter-spacing: -0.015em;
}

h3, .h3 {
  font-weight: 700; /* Bold */
}

h4, .h4 {
  font-weight: 600; /* Semi-bold */
}

/* Selection states for cards and interactive elements */
.card-selected,
.selected {
  border-color: var(--yin-primary);
  background-color: rgba(95, 130, 186, 0.1); /* --yin-primary at 10% opacity */
  box-shadow: 0 0 0 2px rgba(95, 130, 186, 0.3); /* Subtle glow effect */
  transform: translateY(-1px); /* Subtle lift effect */
  transition: all 0.15s ease-in-out;
}

.dark .card-selected,
.dark .selected {
  border-color: var(--yin-primary-light);
  background-color: rgba(124, 155, 207, 0.15); /* --yin-primary-light at 15% opacity */
  box-shadow: 0 0 0 2px rgba(124, 155, 207, 0.4); /* Enhanced glow in dark mode */
}

/* Button hover states with enhanced feedback */
.button-hover-effect:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}