/* ============================================================
   variables.css — Design Tokens
   Fatigue Answers — "Rest & Hope" Hybrid System
   ============================================================ */

:root {

    /* -----------------------------------------------------------
       COLOUR — Light Mode (Cream Sections)
       ----------------------------------------------------------- */

    --color-bg:           #F9F6F0;          /* Warm Cream — global light background */
    --color-bg-warm:      #F5F0E8;          /* Warm Neutral — alternating content sections */
    --color-island:       #FFFFFF;          /* Card / container background */

    /* Sage — labels, icons, badges, secondary accents */
    --color-primary:      #84A98C;          /* Soft Sage Green */
    --color-primary-dark: #6B9175;          /* Deep Sage — links, hover states */
    --color-primary-light: #A8C5AF;         /* Light Sage — logo accent on dark/navy backgrounds */

    /* Teal — primary CTAs and key text highlights ONLY */
    --color-cta:          #2A9D8F;          /* Healing Teal */
    --color-cta-dark:     #218F82;          /* Teal hover / active */
    --color-cta-light:    #6DC8BE;          /* Light Teal — text on dark/navy backgrounds (7:1 contrast) */

    /* Navy — body text, headings on light backgrounds */
    --color-secondary:    #2C3E50;          /* Deep Navy */
    --color-text-muted:   rgba(44, 62, 80, 0.6);   /* Muted text on light backgrounds */

    /* Terracotta — urgent single CTA per page, very sparingly */
    --color-accent:       #E67E22;
    --color-accent-dark:  #CF6D17;          /* Terracotta hover state */

    /* Borders and shadows */
    --color-border:       rgba(132, 169, 140, 0.15);   /* 15% Soft Sage */
    --color-shadow:       rgba(30, 43, 60, 0.07);       /* Soft Navy shadow */
    --color-shadow-teal:  rgba(42, 157, 143, 0.22);     /* Teal glow — CTA hover only */


    /* -----------------------------------------------------------
       COLOUR — Dark Mode (Navy Sections)
       Used via .section-dark utility class on hero + alternating sections
       ----------------------------------------------------------- */

    --color-bg-dark:         #1E2B3C;                    /* Deep Slate Navy */
    --color-bg-dark-alt:     #243447;                    /* Slightly lighter — subtle variation */
    --color-text-on-dark:    rgba(255, 255, 255, 0.88);  /* Body copy on dark */
    --color-text-on-dark-muted: rgba(255, 255, 255, 0.55); /* Muted / secondary on dark */
    --color-border-dark:     rgba(255, 255, 255, 0.10);  /* Borders on dark backgrounds */
    --color-island-dark:     rgba(255, 255, 255, 0.05);  /* Glass card on dark sections */
    --color-border-glass:    rgba(255, 255, 255, 0.12);  /* Glass card borders */

    /* Hero overlay gradient (applied to hero images) */
    --overlay-dim: linear-gradient(
        to top,
        rgba(30, 43, 60, 0.72) 0%,
        rgba(30, 43, 60, 0.20) 60%,
        transparent 100%
    );


    /* -----------------------------------------------------------
       TYPOGRAPHY
       ----------------------------------------------------------- */

    --font-serif:   'Playfair Display', serif;  /* Headings — warm, editorial */
    --font-sans:    'Inter', sans-serif;        /* Body, UI, labels — legible, clean */

    /* -----------------------------------------------------------
       SPACING
       ----------------------------------------------------------- */

    --space-section:        112px;   /* Desktop section vertical padding */
    --space-section-mobile:  80px;   /* Mobile section vertical padding */


    /* -----------------------------------------------------------
       GEOMETRY (rounded, organic — no sharp edges)
       ----------------------------------------------------------- */

    --radius-island: 48px;    /* "Island" feature container */
    --radius-image:  24px;    /* Image corners (softened from 32px) */
    --radius-btn:   100px;    /* Pill buttons */
    --radius-card:   16px;    /* Cards — testimonials, articles, empathy points */
    --radius-glass:  20px;    /* Glass cards on dark sections */


    /* -----------------------------------------------------------
       ANIMATION — slow, fluid, therapeutic
       ----------------------------------------------------------- */

    --ease-therapeutic: cubic-bezier(0.2, 0.8, 0.2, 1);
    --duration-slow:    0.4s;    /* Minimum — never go faster than this */
    --duration-gentle:  0.6s;    /* Preferred for fade-in and layout transitions */

}