/* colors.css — SINGLE SOURCE OF TRUTH for every color in the project.
 *
 * Rules:
 *   - Define values ONLY here. All other CSS files use var() references.
 *   - Raw palette → semantic aliases.
 *   - Do not add layout, spacing, or typography here.
 *
 * VITAL PRIME brand palette — per updated client brief:
 *   #7ABEBD  teal        — wellness, freshness, trust
 *   #2F6461  deep teal   — accent hover / emphasis
 *   #14171A  near-black  — premium, sophisticated brand color
 *   #FFFFFF  white       — dominant page background
 *   #9AA3A2  neutral grey— supporting text, borders
 *   #F3F4F2  soft grey   — alternate section background
 * Tints/hovers not in this list are computed from it (mixed toward white or
 * black) to keep every shade traceable back to the six brand colors.
 */

:root {

    /* ── Raw brand palette ──────────────────────────────────────────────── */
    --color-primary:        #14171A;   /* near-black — premium, sophisticated brand color */
    --color-primary-hover:  #262B2E;   /* lighter near-black — hover states        */
    --color-primary-light:  #F3F4F2;   /* soft neutral grey                        */
    --color-dark:           #14171A;   /* same as primary — headings, nav          */
    --color-accent:         #7ABEBD;   /* teal — wellness, freshness, trust        */
    --color-accent-hover:   #2F6461;   /* deep teal — accent hover states          */
    --color-accent-light:   #EFF7F7;   /* pale teal tint — section backgrounds     */

    --color-light:          #FFFFFF;   /* dominant white — page background         */
    --color-text-main:      #14171A;   /* near-black — body copy                   */
    --color-text-muted:     #9AA3A2;   /* neutral grey — captions, supporting text */
    --color-white:          #FFFFFF;
    --color-border:         #EBEDEC;   /* subtle border / divider                  */
    --color-bg-section:     #F3F4F2;   /* alternate section background — soft grey */

    /* ── Status / functional colors ────────────────────────────────────── */
    --color-success:         #16a34a;
    --color-success-bg:      #f0fdf4;
    --color-success-border:  #bbf7d0;
    --color-error:           #dc2626;
    --color-error-bg:        #fef2f2;
    --color-error-border:    #fecaca;
    --color-danger-hover:    #b91c1c;
    --color-warning-bg:      #fef3c7;
    --color-warning-text:    #92400e;
    --color-hover-subtle:    #f5f5f5;

    --color-focus-ring:     rgba(122, 190, 189, 0.35);

    /* ── Benefit / value card tints — soft neutrals harmonious with the palette */
    --color-card-1: #F8FCFC;
    --color-card-2: #EFF7F7;
    --color-card-3: #F3F4F2;
    --color-card-4: #F4FAFA;

    /* ── Semantic aliases — use these in component CSS, not the raw palette ── */
    --color-nav-bg:               var(--color-dark);
    --color-nav-text:             var(--color-white);
    --color-nav-text-dim:         rgba(255, 255, 255, 0.72);
    --color-nav-active:           var(--color-white);
    --color-nav-hover-bg:         rgba(255, 255, 255, 0.08);

    --color-cta-primary-bg:       var(--color-dark);
    --color-cta-primary-text:     var(--color-white);
    --color-cta-primary-hover-bg: var(--color-primary-hover);

    --color-cta-secondary-bg:     transparent;
    --color-cta-secondary-border: var(--color-dark);
    --color-cta-secondary-text:   var(--color-dark);
    --color-cta-secondary-hover-bg: var(--color-dark);
    --color-cta-secondary-hover-text: var(--color-white);

    /* Button on dark sections (impact blocks) */
    --color-cta-light-bg:         var(--color-white);
    --color-cta-light-text:       var(--color-dark);
    --color-cta-light-hover-bg:   var(--color-accent-light);

    /* Impact / dark section background */
    --color-section-dark-bg:      var(--color-dark);
    --color-section-dark-text:    var(--color-white);
    --color-section-dark-text-dim: rgba(255, 255, 255, 0.72);

    /* ── Backward-compat aliases ──────────────────────────────────────────── */
    --color-text:         var(--color-text-main);
    --color-bg:           var(--color-white);
    --color-bg-alt:       var(--color-bg-section);
    --color-primary-dark: var(--color-primary-hover);
}