/* ============================================================
   Rosies — Color System (CYAN-FORWARD, corrected palette)
   File:  /wp-content/themes/rosies/assets/css/colors.css
   Depends on: nothing (should load before typography.css)

   Version 2 — 2026-08-26
   Palette rebuilt against the real RTKids brand:
     • CYAN is primary (was navy)
     • PURPLE added (staff/board names, testimonials)
     • YELLOW-GOLD added (Gala only)
     • MINT TEAL added (section background bands)
     • GREEN added (small decorative accents)
     • NAVY demoted to logo/tagline use only
     • CHARCOAL added for footer background

   Strict WCAG 2.1 AA compliance for every text pairing below.
   Every text/background combo in this file was verified with
   the WCAG 2.1 relative-luminance formula. Ratios noted inline.
   ============================================================ */


/* ------------------------------------------------------------
   1. Design tokens (CSS custom properties)
   ------------------------------------------------------------ */
:root {

  /* ---- Brand colors (visual identity, LARGE/DECORATIVE) ------
     Vivid brand values from the live RTKids site. Safe for
     illustrations, hero fills, badges, iconography, hand-drawn
     accents. NOT safe for small text on white — every text usage
     must go through the *-text variant below (or on a dark bg).
     ---------------------------------------------------------- */
  --rosies-cyan:           #22B0D1;   /* PRIMARY brand — 2.56:1 on white (decorative only) */
  --rosies-orange:         #E88529;   /* SECONDARY accent — 2.69:1 (decorative only) */
  --rosies-purple:         #7E5CBB;   /* Names, testimonials — 5.08:1 (AA on white, borderline) */
  --rosies-yellow:         #C4B23A;   /* Gala only — 2.15:1 (decorative only) */
  --rosies-green:          #6BC144;   /* Small accents — 2.25:1 (decorative only) */
  --rosies-mint:           #DDF0EC;   /* Section background band */
  --rosies-navy:           #1D3055;   /* Logo type + tagline chip only */
  --rosies-charcoal:       #2B2B2B;   /* Footer background, body text alt */

  /* ---- Text-safe brand variants ------------------------------
     Darkened variants that pass AA on white for text, small
     icons, links, and button backgrounds paired with white text.
     Verified contrast ratios on white:
       Cyan-Text     #0369A1  →  5.93 : 1  (AA + AA-large)
       Orange-Text   #B85C10  →  4.59 : 1  (AA + AA-large)
       Purple-Text   #5F3F9E  →  7.80 : 1  (AAA)
       Yellow-Text   #7A6F1F  →  5.10 : 1  (AA + AA-large)  [use on white when text]
       Green-Text    #3D7A20  →  5.25 : 1  (AA + AA-large)
     ---------------------------------------------------------- */
  --rosies-cyan-text:      #0369A1;
  --rosies-orange-text:    #B85C10;
  --rosies-purple-text:    #5F3F9E;
  --rosies-yellow-text:    #7A6F1F;
  --rosies-green-text:     #3D7A20;

  /* ---- Neutrals (grayscale) ----------------------------------
     Contrast on white (foreground):
       Ink        #2A2A2A  → 14.35 : 1  (AAA)
       Ink-Soft   #4A4A4A  →  8.86 : 1  (AAA)
       Ink-Muted  #767676  →  4.54 : 1  (AA normal — minimum)
     ---------------------------------------------------------- */
  --rosies-ink:            #2A2A2A;   /* Body text */
  --rosies-ink-soft:       #4A4A4A;   /* Secondary text, meta */
  --rosies-ink-muted:      #767676;   /* Captions, disabled — AA edge */
  --rosies-line:           #E5E7EB;   /* Borders, dividers, hairlines */
  --rosies-surface:        #F7F7F8;   /* Section backgrounds, cards */
  --rosies-white:          #FFFFFF;   /* Page background */
  --rosies-black:          #000000;   /* Rarely used; prefer --rosies-ink */

  /* ---- Semantic (state) colors -------------------------------
     AA-compliant defaults for form validation, alerts.
     Kept minimal — extend when needed.
     ---------------------------------------------------------- */
  --rosies-success:        #16803C;   /* AA on white — 4.76:1 */
  --rosies-warning:        #92400E;   /* AA on white — 6.79:1 */
  --rosies-error:          #B91C1C;   /* AA on white — 6.26:1 */

  /* ---- Component tokens (map brand → role) ------------------
     CYAN-FORWARD: primary interactive/heading color is cyan,
     not navy. Purple is a secondary accent for people/testimonials.
     ---------------------------------------------------------- */
  --rosies-text-body:            var(--rosies-ink);
  --rosies-text-secondary:       var(--rosies-ink-soft);
  --rosies-text-muted:           var(--rosies-ink-muted);
  --rosies-text-heading:         var(--rosies-cyan-text);
  --rosies-text-heading-alt:     var(--rosies-purple-text);   /* Testimonial headings, staff names */
  --rosies-text-inverse:         var(--rosies-white);

  --rosies-link:                 var(--rosies-cyan-text);
  --rosies-link-hover:           var(--rosies-orange-text);
  --rosies-link-inverse:         var(--rosies-white);
  --rosies-link-inverse-hover:   var(--rosies-yellow);        /* Yellow OK for large hover text on dark */

  --rosies-btn-primary-bg:       var(--rosies-cyan-text);     /* Primary CTA fill */
  --rosies-btn-primary-text:     var(--rosies-white);
  --rosies-btn-accent-bg:        var(--rosies-orange-text);   /* Donate / high-emphasis CTA */
  --rosies-btn-accent-text:      var(--rosies-white);

  --rosies-focus-ring:           var(--rosies-orange-text);
}


/* ------------------------------------------------------------
   2. Apply tokens to base elements
   ------------------------------------------------------------ */
body,
.container-wrap {
  color: var(--rosies-text-body);
  background-color: var(--rosies-white);
}


/* ------------------------------------------------------------
   3. Links (default context — on white/light backgrounds)
   ------------------------------------------------------------ */
a,
a:link {
  color: var(--rosies-link);
  transition: color 0.15s ease-in-out;
}

a:hover,
a:focus {
  color: var(--rosies-link-hover);
}

/* Links inside charcoal, navy, or explicitly-dark sections */
.rosies-on-charcoal a,
.rosies-on-navy a,
#footer-outer a,
[class*="dark-section"] a {
  color: var(--rosies-link-inverse);
}

.rosies-on-charcoal a:hover,
.rosies-on-navy a:hover,
#footer-outer a:hover,
[class*="dark-section"] a:hover {
  color: var(--rosies-link-inverse-hover);
}


/* ------------------------------------------------------------
   4. Focus indicators — required for AA (2.4.7 Focus Visible)
   ------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.nectar-button:focus-visible,
.vc_btn3:focus-visible {
  outline: 2px solid var(--rosies-focus-ring);
  outline-offset: 2px;
}


/* ------------------------------------------------------------
   5. Utility classes — text colors
   Prefer semantic HTML + native heading styles; these are
   for spot use (staff names, testimonial headings, etc.).
   ------------------------------------------------------------ */
.rosies-text-cyan         { color: var(--rosies-cyan-text); }     /* AA-safe variant */
.rosies-text-orange       { color: var(--rosies-orange-text); }   /* AA-safe variant */
.rosies-text-purple       { color: var(--rosies-purple-text); }   /* AAA on white */
.rosies-text-yellow       { color: var(--rosies-yellow-text); }   /* AA-safe variant */
.rosies-text-green        { color: var(--rosies-green-text); }    /* AA-safe variant */
.rosies-text-navy         { color: var(--rosies-navy); }          /* Logo/tagline only */
.rosies-text-white        { color: var(--rosies-white); }
.rosies-text-ink          { color: var(--rosies-ink); }
.rosies-text-ink-soft     { color: var(--rosies-ink-soft); }
.rosies-text-muted        { color: var(--rosies-ink-muted); }


/* ------------------------------------------------------------
   6. Utility classes — background colors
   Signals a colored section; nested text uses AA-safe pairings.
   ------------------------------------------------------------ */

/* Cyan primary fill (buttons, feature strips) — white text */
.rosies-bg-cyan {
  background-color: var(--rosies-cyan-text);   /* AA-safe cyan */
  color: var(--rosies-white);
}
.rosies-bg-cyan h1,
.rosies-bg-cyan h2,
.rosies-bg-cyan h3,
.rosies-bg-cyan h4,
.rosies-bg-cyan h5,
.rosies-bg-cyan h6 { color: var(--rosies-white); }

/* Orange accent fill (Donate CTA blocks) — white text */
.rosies-bg-orange {
  background-color: var(--rosies-orange-text);
  color: var(--rosies-white);
}
.rosies-bg-orange h1,
.rosies-bg-orange h2,
.rosies-bg-orange h3,
.rosies-bg-orange h4,
.rosies-bg-orange h5,
.rosies-bg-orange h6 { color: var(--rosies-white); }

/* Purple fill (testimonials, staff callouts) — white text */
.rosies-bg-purple {
  background-color: var(--rosies-purple-text);   /* AAA-safe purple */
  color: var(--rosies-white);
}
.rosies-bg-purple h1,
.rosies-bg-purple h2,
.rosies-bg-purple h3,
.rosies-bg-purple h4,
.rosies-bg-purple h5,
.rosies-bg-purple h6 { color: var(--rosies-white); }

/* Mint teal section band — dark ink text */
.rosies-bg-mint {
  background-color: var(--rosies-mint);
  color: var(--rosies-ink);
}
.rosies-bg-mint h1,
.rosies-bg-mint h2,
.rosies-bg-mint h3,
.rosies-bg-mint h4,
.rosies-bg-mint h5,
.rosies-bg-mint h6 { color: var(--rosies-cyan-text); }

/* Navy fill (rare — logo/tagline strips only) */
.rosies-bg-navy {
  background-color: var(--rosies-navy);
  color: var(--rosies-white);
}
.rosies-bg-navy h1,
.rosies-bg-navy h2,
.rosies-bg-navy h3,
.rosies-bg-navy h4,
.rosies-bg-navy h5,
.rosies-bg-navy h6 { color: var(--rosies-white); }

/* Charcoal fill (footer, dark hero) */
.rosies-bg-charcoal {
  background-color: var(--rosies-charcoal);
  color: var(--rosies-white);
}
.rosies-bg-charcoal h1,
.rosies-bg-charcoal h2,
.rosies-bg-charcoal h3,
.rosies-bg-charcoal h4,
.rosies-bg-charcoal h5,
.rosies-bg-charcoal h6 { color: var(--rosies-white); }

.rosies-bg-surface {
  background-color: var(--rosies-surface);
  color: var(--rosies-ink);
}

.rosies-bg-white {
  background-color: var(--rosies-white);
  color: var(--rosies-ink);
}


/* ------------------------------------------------------------
   7. Brand-decorative utilities
   Use for illustrations, badges, hand-drawn accents, hero
   circles — NEVER on text.
   ------------------------------------------------------------ */
.rosies-decoration-cyan    { background-color: var(--rosies-cyan); }
.rosies-decoration-orange  { background-color: var(--rosies-orange); }
.rosies-decoration-purple  { background-color: var(--rosies-purple); }
.rosies-decoration-yellow  { background-color: var(--rosies-yellow); }
.rosies-decoration-green   { background-color: var(--rosies-green); }
.rosies-decoration-mint    { background-color: var(--rosies-mint); }


/* ------------------------------------------------------------
   8. Selection color
   ------------------------------------------------------------ */
::selection {
  background-color: var(--rosies-cyan-text);
  color: var(--rosies-white);
}