/*
 * Walt Opie Design Tokens Only - WordPress Baseline Mode
 * Contains ONLY CSS custom properties, no component classes
 * Preserves WordPress block editor typography hierarchy
 */

:root {
  /* ===== WALT OPIE BRAND COLORS ===== */
  /* Primary meditation palette */
  --walt-brown: #8B4513;           /* Warm brown - earth/meditation */
  --walt-green: #2E8B57;           /* Forest green - nature/calm */
  --walt-gold: #DAA520;            /* Golden rod - wisdom/light */
  --walt-gray: #6B7280;            /* Warm gray - neutral */
  
  /* Extended brand palette */
  --walt-brown-light: #A0522D;
  --walt-brown-dark: #6D4C41;
  --walt-green-light: #3CB371;
  --walt-green-dark: #228B22;
  --walt-gold-light: #F4D03F;
  --walt-gold-dark: #B8860B;
  
  /* WordPress compatibility aliases */
  --color-primary: var(--walt-brown);
  --color-secondary: var(--walt-green);
  --color-accent: var(--walt-gold);
  --color-neutral: var(--walt-gray);
  
  /* ===== TYPOGRAPHY TOKENS ===== */
  /* Font families - production tested */
  --font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-meditation: var(--font-body);
  
  /* WordPress clamp() typography scale - matches Twenty Twenty-Five */
  --font-size-xx-large: clamp(2.15rem, 2.15rem + ((1vw - 0.2rem) * 1.063), 3rem);
  --font-size-x-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 0.313), 2rem);
  --font-size-large: clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 0.313), 1.375rem);
  
  /* Meditation text enhancements */
  --meditation-line-height: 1.8;
  --meditation-letter-spacing: 0.025em;
  
  /* ===== LAYOUT TOKENS ===== */
  /* Content constraints */
  --content-max-width: 70ch;
  --content-padding-sm: 1rem;
  --content-padding-md: 2rem;
  --walt-container-max: 1200px;
  
  /* Full-width layout calculations */
  --full-width-offset: calc(-100vw / 2 + 50%);
  
  /* ===== COMPONENT TOKENS ===== */
  /* Walt profile photo dimensions */
  --walt-photo-width-lg: 280px;
  --walt-photo-width-md: 240px;
  --walt-photo-width-sm: 200px;
  --walt-photo-radius: 12px;
  
  /* Dharma talk cards */
  --dharma-card-radius: 12px;
  --dharma-card-padding-x: 2.5rem;
  --dharma-card-padding-y: 3rem;
  
  /* Grid systems */
  --walt-hero-columns: 350px 1fr;
  --dharma-grid-gap: 2rem;
  
  /* ===== ELEVATION TOKENS ===== */
  /* Box shadows */
  --shadow-walt-photo: 0 10px 25px rgba(0,0,0,0.1);
  --shadow-walt-photo-hover: 0 20px 40px rgba(0,0,0,0.15);
  --shadow-dharma-card: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-dharma-card-hover: 0 12px 24px rgba(0, 0, 0, 0.15);
  --shadow-meditation-subtle: 0 2px 8px rgba(0, 0, 0, 0.06);
  
  /* ===== MOTION TOKENS ===== */
  /* Animation timings */
  --duration-walt-transition: 700ms;
  --duration-meditation: 300ms;
  --duration-fast: 150ms;
  
  /* Easing curves */
  --ease-meditation: ease-in-out;
  --ease-walt: ease-in-out;
  
  /* Transform scales */
  --scale-walt-subtle: 1.02;
  --scale-mobile-hover: 1.05;
  --scale-desktop-hover: 1.1;
  
  /* ===== BORDER TOKENS ===== */
  /* Border radii */
  --radius-meditation: 8px;
  --radius-walt-photo: var(--walt-photo-radius);
  --radius-dharma-card: var(--dharma-card-radius);
  
  /* Border colors */
  --border-card: #e5e7eb;
  --border-card-hover: #d1d5db;
  --border-meditation: #f3f4f6;
}

/* ===== WORDPRESS INTEGRATION (TOKENS ONLY) ===== */
/* WordPress preset mapping - no component classes */

/* WordPress preset color mapping */
:root {
  --wp--preset--color--primary: var(--walt-brown);
  --wp--preset--color--secondary: var(--walt-green);
  --wp--preset--color--accent: var(--walt-gold);
  
  /* WordPress preset font size mapping */
  --wp--preset--font-size--xx-large: var(--font-size-xx-large);
  --wp--preset--font-size--x-large: var(--font-size-x-large);
  --wp--preset--font-size--large: var(--font-size-large);
  
  /* WordPress preset font family mapping */
  --wp--preset--font-family--heading: var(--font-heading);
  --wp--preset--font-family--body: var(--font-body);
}

/* ===== MINIMAL UTILITY CLASSES ===== */
/* Only essential utilities that don't interfere with WordPress */

.meditation-text {
  line-height: var(--meditation-line-height);
  letter-spacing: var(--meditation-letter-spacing);
}

.walt-brand-primary { color: var(--walt-brown); }
.walt-brand-secondary { color: var(--walt-green); }
.walt-brand-accent { color: var(--walt-gold); }

/* Walt photo sizes for responsive images - minimal impact */
.walt-photo-lg { width: var(--walt-photo-width-lg); }
.walt-photo-md { width: var(--walt-photo-width-md); }
.walt-photo-sm { width: var(--walt-photo-width-sm); }

/* Content width utilities */
.content-readable { max-width: var(--content-max-width); margin: 0 auto; }
.walt-container { max-width: var(--walt-container-max); margin: 0 auto; }

/* ===== ACCESSIBILITY ===== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-walt-transition: 0ms;
    --duration-meditation: 0ms;
    --duration-fast: 0ms;
  }
}

@media (prefers-contrast: high) {
  :root {
    --border-card: #000000;
    --border-card-hover: #333333;
    --shadow-walt-photo: 0 4px 8px rgba(0,0,0,0.5);
    --shadow-dharma-card: 0 2px 4px rgba(0,0,0,0.3);
  }
}