/* ==========================================================================
   Spark_Academy_Web_Colors.css
   SPARK ACADEMY — Website Color System (October 2026)
   "Soft colors. Same Spark."
   Inspired by the approved Meet the Spark Team posters.
   Contrast targets: WCAG 2.2 AA (4.5:1 normal text, 3:1 meaningful UI boundaries)
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     01 / PAGE FOUNDATIONS (~70% visual balance)
     Warm cream carries the paper-like poster background into a clean screen surface.
     ------------------------------------------------------------------------ */
  --sp-cream: #F8F4EC;        /* rgb(248, 244, 236) - Primary warm paper foundation */
  --sp-white: #FFFFFF;        /* rgb(255, 255, 255) - Elevated card & content surface */

  /* ------------------------------------------------------------------------
     02 / FIVE SOFT POSTER & COMPANION COLORS (Decorative panels, tags, accents)
     All five main pastel fills support Ink (#26312B) text at 4.5:1 or higher.
     NEVER use white lettering on these pastels.
     ------------------------------------------------------------------------ */
  --sp-blush: #E8B9B5;        /* rgb(232, 185, 181) - Pink -> Blush (New companion) */
  --sp-peach: #EEB6A4;        /* rgb(238, 182, 164) - Orange -> Peach (Poster sample) */
  --sp-butter: #F1D49A;       /* rgb(241, 212, 154) - Yellow -> Butter (Poster sample) */
  --sp-sage: #8D9B84;         /* rgb(141, 155, 132) - Green -> Sage (Poster sample, 4.60:1 w/ Ink) */
  --sp-dusty-teal: #9EB9B8;   /* rgb(158, 185, 184) - Teal -> Dusty teal (New companion, 6.48:1 w/ Ink) */

  /* ------------------------------------------------------------------------
     03 / SOFT SECTION FILLS (~20% visual balance)
     Let sage lead, with one or two other colors supporting each section.
     ------------------------------------------------------------------------ */
  --sp-sage-tint: #E7EBE3;    /* Primary soft section & card fill */
  --sp-blush-tint: #F5E5E2;   /* Secondary warm blush section & card fill */
  --sp-teal-tint: #E3ECEB;    /* Secondary cool dusty-teal section & card fill */
  --sp-butter-tint: #FAF1DC;  /* Gentle warm highlight surface */
  --sp-peach-tint: #F9EAE4;   /* Gentle warm peach surface */

  /* ------------------------------------------------------------------------
     04 / CALLS TO ACTION, LINKS & CONTROLS (~10% visual balance)
     Rule 2: Separate decoration from controls. Use deep sage for links,
     buttons, input borders, and meaningful icons on cream or white.
     ------------------------------------------------------------------------ */
  --sp-deep-sage: #4D6254;       /* Primary CTA fill & control color (6.58:1 w/ #FFFFFF) */
  --sp-deep-sage-hover: #3D4F44; /* Primary CTA hover (8.75:1 w/ #FFFFFF) */

  /* ------------------------------------------------------------------------
     05 / EVERYDAY TEXT
     ------------------------------------------------------------------------ */
  --sp-ink: #26312B;          /* Primary body & heading text (12.30:1 on #F8F4EC) */
  --sp-quiet: #55625B;        /* Quiet supporting text on cream/white (5.83:1 on #F8F4EC) */

  /* ------------------------------------------------------------------------
     06 / UI BOUNDARIES & SHADOWS
     ------------------------------------------------------------------------ */
  --sp-border-subtle: rgba(77, 98, 84, 0.16);
  --sp-border-control: #4D6254; /* 3:1+ meaningful UI boundary for inputs & controls */
  --sp-shadow-card: 0 10px 28px -8px rgba(38, 49, 43, 0.06), 0 2px 6px rgba(38, 49, 43, 0.03);
  --sp-shadow-float: 0 20px 42px -12px rgba(38, 49, 43, 0.10), 0 4px 10px rgba(38, 49, 43, 0.04);
}

/* Rule 3: Make states visible — Ink outline with a white separation ring */
:is(a, button, input, textarea, select, summary):focus-visible {
  outline: 2.5px solid var(--sp-ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--sp-white), 0 0 0 4.5px var(--sp-ink);
  border-radius: 6px;
}