/* ============================================
   COLOR SYSTEM - INFINITE GRATITUDE PROJECT
   ============================================
   
   This file defines the formal color system for the site.
   All colors follow strict rules to maintain authority and coherence.
   
   DESIGN PRINCIPLES:
   1. Beige/parchment is ALWAYS the dominant base
   2. Each accent color has ONE meaning (no reuse)
   3. No new colors without a new book/major section
   
   ============================================ */

:root {
    /* ============================================
       BASE PALETTE - Beige/Parchment (Paper-like)
       Used for: Primary backgrounds, sections
       Psychology: Safety, warmth, timeless, editorial
       ============================================ */
    --color-base-lightest: #faf9f6;      /* Lightest parchment */
    --color-base-light: #f5f4f0;         /* Light beige */
    --color-base-medium: #e8e6e1;        /* Medium beige */
    --color-base-dark: #d4d1c8;          /* Darker parchment */
    
    /* ============================================
       NEUTRAL SCALE - Grays & Blacks
       Used for: Text, borders, shadows
       ============================================ */
    --color-white: #ffffff;
    --color-text-primary: #2c3e50;       /* Headings */
    --color-text-secondary: #555;        /* Body text */
    --color-text-tertiary: #666;         /* Supporting text */
    --color-text-muted: #888;            /* Subtle text */
    --color-border-light: rgba(0, 0, 0, 0.05);
    --color-border-medium: rgba(0, 0, 0, 0.1);
    
    /* ============================================
       ACCENT 1: PURPLE - Author/Voice/Depth
       Used for: Author section background, accents
       Psychology: Introspection, depth, inner world
       Rule: ONLY for author-related content
       ============================================ */
    --color-purple-deep: #3e314b;        /* Darkest purple (backgrounds) */
    --color-purple-rich: #4c3d5a;        /* Rich purple (gradients) */
    --color-purple-soft: #5a4d6a;        /* Softer purple (5% desaturated) */
    
    /* ============================================
       ACCENT 2: PINK - Reader Love/Warmth
       Used for: Testimonial sections, "Why readers love" sections
       Psychology: Warmth, appreciation, earned care
       Rule: ONLY appears after trust is built
       ============================================ */
    --color-pink-bright: #ffafcc;        /* Original bright */
    --color-pink-medium: #ff89aa;        /* Medium pink */
    --color-pink-soft: #f5a4bd;          /* Desaturated by 5% */
    --color-pink-gentle: #f0b4c7;        /* Desaturated by 8% */
    
    /* ============================================
       ACCENT 3: TEAL/GREEN - Prayer/Stillness
       Used for: Prayer book sections, calm moments
       Psychology: Breath, calm, continuity, return
       Rule: ONLY for prayer book content
       ============================================ */
    --color-teal-bright: #88d8c0;        /* Original bright */
    --color-teal-soft: #a8e6cf;          /* Soft teal */
    --color-teal-muted: #97dcc6;         /* Desaturated by 5% */
    --color-teal-gentle: #a3e0cc;        /* Desaturated by 8% */
    --color-teal-background-light: #f0f9f8;
    --color-teal-background-medium: #e6f4f1;
    
    /* ============================================
       PRIMARY CTA - Purple (Author Color)
       Used for: All call-to-action buttons across the site
       Psychology: Depth, introspection, consistency with author theme
       Rule: MUST be consistent everywhere (no variations)
       ============================================ */
    --color-cta-primary: #4c3d5a;        /* Primary CTA purple (matches author section) */
    --color-cta-hover: #3e314b;          /* Hover state (darker purple) */
    --color-cta-shadow: rgba(76, 61, 90, 0.4);  /* Shadow for hover */
    
    /* Button Text Colors */
    --color-cta-text: #ffffff;           /* Text color on primary buttons */
    --color-cta-text-hover: #ffffff;     /* Text color on hover (same as normal) */
    --color-cta-secondary-text: #4c3d5a;  /* Text color on secondary buttons (matches CTA primary) */
    --color-cta-secondary-text-hover: #ffffff; /* Text color on secondary button hover */
    
    /* Author Section Button Text (on dark purple background) */
    --color-author-cta-text: rgba(255, 255, 255, 0.95); /* Text color on author section buttons */
    --color-author-cta-text-hover: #ffffff; /* Text color on author button hover */
    
    /* ============================================
       SUPPORTING COLORS - Limited Use
       These should be used sparingly and never for new sections
       ============================================ */
    --color-gradient-warm-start: #f7d8a7;  /* Used in author bio gradient */
    --color-gradient-warm-end: #e9a3b9;    /* Used in author bio gradient */
    
    /* ============================================
       UTILITY COLORS - Functional Only
       Used for: Success states, warnings, info (if needed)
       ============================================ */
    --color-success: #4caf50;
    --color-warning: #ff9800;
    --color-error: #f44336;
    
    /* ============================================
       SHADOWS & OVERLAYS
       Used for: Depth, elevation, focus
       ============================================ */
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);
    
    --overlay-light: rgba(255, 255, 255, 0.9);
    --overlay-dark: rgba(0, 0, 0, 0.2);
}

/* ============================================
   USAGE RULES & GOVERNANCE
   ============================================
   
   RULE 1: ONE DOMINANT BASE
   - Every new section should use beige/parchment as the base
   - Ask: "Does this belong on paper?" If no, reconsider.
   
   RULE 2: COLOR = MEANING, NOT DECORATION
   - Purple → author/voice + call-to-action (primary)
   - Pink → reader love/affirmation
   - Teal/green → prayer/stillness
   
   - DO NOT reuse a color for different meanings
   - DO NOT mix colors within the same section
   
   RULE 3: NO NEW ACCENT COLORS WITHOUT NEW BOOK
   - Only introduce new accent colors if:
     a) A new book is released
     b) It has a strong identity
     c) It serves a unique emotional register
   
   RULE 4: DESATURATION FOR EDITORIAL FEEL
   - Use the "soft" or "gentle" variants for larger sections
   - Use brighter variants only for small accents
   
   RULE 5: CTA CONSISTENCY
   - ALL CTAs must use --color-cta-primary (purple, matches author section)
   - ALL hover states must use --color-cta-hover
   - NO variations in hue, saturation, or behavior
   
   ============================================
   ANTI-PATTERNS (DO NOT DO)
   ============================================
   
   ❌ Using multiple accent colors in one section
   ❌ Creating ad-hoc colors (e.g., #ff5733) without adding to this file
   ❌ Using pink for prayer content (it's for testimonials only)
   ❌ Using teal for journal content (it's for prayer only)
   ❌ Inventing new gradients without purpose
   ❌ Different colors for different CTAs (must use purple)
   
   ============================================
   APPROVED PATTERNS
   ============================================
   
   ✅ Beige/parchment as dominant background
   ✅ One accent color per major section
   ✅ Consistent CTA purple across entire site (matches author theme)
   ✅ Desaturated accent variants for large areas
   ✅ Bright accent variants for small highlights
   
   ============================================ */

/* Example Usage:
   
   .author-section {
       background: linear-gradient(135deg, var(--color-purple-rich), var(--color-purple-deep));
   }
   
   .testimonial-section {
       background: linear-gradient(135deg, var(--color-pink-gentle), var(--color-pink-soft));
   }
   
   .prayer-section {
       background: linear-gradient(135deg, var(--color-teal-background-light), var(--color-teal-background-medium));
   }
   
   .cta-button {
       background: var(--color-cta-primary);
       color: var(--color-cta-text);
   }
   
   .cta-button:hover {
       background: var(--color-cta-hover);
       color: var(--color-cta-text-hover);
       box-shadow: 0 4px 15px var(--color-cta-shadow);
   }
   
   .cta-button-secondary {
       background: transparent;
       color: var(--color-cta-secondary-text);
       border: 2px solid var(--color-cta-primary);
   }
   
   .cta-button-secondary:hover {
       background: var(--color-cta-primary);
       color: var(--color-cta-secondary-text-hover);
   }
*/