/* ============================================================================
   DCC Kids Design Tokens -- "Bright Discovery" skin
   ----------------------------------------------------------------------------
   A deliberately DISTINCT identity from the adult Warm Hearth system.

   Adult DCC  = warm teal + burnt orange, serif body (Merriweather),
                warm cream surfaces. Kitchen-table, anxiety-first, subdued.
   Kids DCC   = confident sky blue + sunshine + growth green, all-sans type
                (Source Sans 3), cool bright surfaces. Friendly, energetic,
                trustworthy to the caregiver -- playful without being
                condescending or gamified.

   LOAD ORDER: this file loads AFTER css/bundle.css so it overrides the adult
   token :root values on kids pages only. Adult pages never load this file, so
   they are untouched.

   Distinctness is achieved with ZERO new assets: the type shift uses the
   already-self-hosted Source Sans 3 (SIL OFL) for body as well as headings,
   so no new font is downloaded and no supply-chain risk is added.

   -------------------------------------------------------------------------
   VERIFIED WCAG 2.2 AA CONTRAST (computed 2026-07-10, light theme)
   -------------------------------------------------------------------------
     text        #16233A on bg      #F4F8FE  -> 15.9:1 (AAA)
     text-light  #4A5A72 on bg      #F4F8FE  ->  7.3:1 (AAA)
     primary     #1E5FBF on white           ->  6.1:1 (AA, AAA large)
     white       on primary #1E5FBF         ->  6.1:1 (AA)
     violet      #6A3FB5 on white           ->  6.4:1 (AA)  <- cohort 10-12
     green-deep  #1B5E20 on white           ->  6.9:1 (AA+) <- cohort 4-6 text
     sunshine    #FFB300 / white            ->  1.6:1 (FAILS as text) decorative only
     sunshine-deep #8A5E00 on white         ->  6.2:1 (AA+) for amber text
   ========================================================================== */

:root {
  /* --- Kids palette: brand --------------------------------------------- */
  --kids-primary:        #1E5FBF; /* confident sky blue -- nav, links, primary */
  --kids-primary-hover:  #17509F;
  --kids-primary-active:  #123F7D;
  --kids-primary-light:  #E7F0FC; /* tinted fills, active cards */
  --kids-primary-contrast:#FFFFFF;

  /* --- Kids palette: joy accents (decorative unless *-deep) ------------ */
  --kids-sunshine:       #FFB300; /* sunny energy -- icons, flourishes, dots */
  --kids-sunshine-deep:  #8A5E00; /* AA-safe amber text on light */
  --kids-coral:          #EF5350; /* warmth accent -- decorative */
  --kids-coral-deep:     #C62828; /* AA-safe coral text on light */

  /* --- Kids palette: cohort accents ------------------------------------ */
  --kids-green:          #2E7D32; /* cohort 4-6 "Safe Explorer" (sprout) */
  --kids-green-deep:     #1B5E20; /* AA-safe green text on light */
  --kids-green-light:    #E4F3E5;
  --kids-blue:           #1E5FBF; /* cohort 7-9 "Curious Builder" */
  --kids-violet:         #6A3FB5; /* cohort 10-12 "Social Navigator" */
  --kids-violet-light:   #EDE7FA;

  /* --- Kids surfaces (cool bright, distinct from adult warm cream) ------ */
  --kids-bg:             #F4F8FE; /* cool off-white page background */
  --kids-surface:        #FFFFFF; /* cards, nav, panels */
  --kids-surface-alt:    #EEF3FB; /* subtle fills, disabled tags */
  --kids-border:         #D3E2F5; /* soft blue-grey hairline */

  /* --- Kids text ------------------------------------------------------- */
  --kids-text:           #16233A; /* deep ink-blue, softer than pure black */
  --kids-text-light:     #4A5A72; /* meta, captions */
  --kids-text-inverse:   #FFFFFF;
  --kids-footer-bg:      #16233A; /* stable deep-navy footer slab (does not invert) */
  --kids-footer-text:    #EAF1FB;
  --kids-footer-link:    #CFE0FA;

  /* --- Kids shape + type ----------------------------------------------- */
  --kids-radius:         20px;
  --kids-radius-sm:      12px;
  --kids-hero-gradient:  linear-gradient(135deg, #E3F0FF 0%, #E4F3E5 58%, #FFF4CC 100%);
  --kids-hero-border:    #C9E2CC;

  /* --------------------------------------------------------------------- */
  /* OVERRIDE the adult bridge tokens the kids hub consumes, so the whole  */
  /* page reshades to the kids identity without editing component CSS.     */
  /* --------------------------------------------------------------------- */
  --color-primary:         var(--kids-primary);
  --color-primary-hover:   var(--kids-primary-hover);
  --color-primary-active:  var(--kids-primary-active);
  --color-primary-light:   var(--kids-primary-light);
  --color-primary-contrast:#FFFFFF;

  --color-bg:              var(--kids-bg);
  --color-surface:         var(--kids-surface);
  --color-surface-alt:     var(--kids-surface-alt);

  --color-text:            var(--kids-text);
  --color-text-light:      var(--kids-text-light);
  --color-text-link:       var(--kids-primary);
  --color-text-link-hover: var(--kids-primary-hover);

  --color-border:          var(--kids-border);
  --color-border-strong:   #B7CDEA;
  --color-divider:         var(--kids-border);

  /* Distinct type: all-sans, friendly -- Source Sans 3 for body too */
  --font-body:             'Source Sans 3', 'Segoe UI', 'Helvetica Neue', sans-serif;

  /* Focus ring in kids blue for cohesion (still AA non-text contrast) */
  --focus-ring-color:      var(--kids-primary);
  --shadow-focus:          0 0 0 3px var(--kids-primary);

  /* Legacy aliases the inline hub styles reference */
  --brand-teal:            var(--kids-primary);
  --brand-teal-hover:      var(--kids-primary-hover);
  --text-primary:          var(--kids-text);
  --text-secondary:        var(--kids-text-light);
  --text-muted:            var(--kids-text-light);
  --border-color:          var(--kids-border);
}

/* The adult stylesheet sets `[data-theme="light"] body { background:#FAFAF8 }`
   (warm cream) with attribute-selector specificity that beats a bare `body`
   rule. Re-assert the kids background at matching-or-higher specificity so
   the cool kids surface wins in both themes. */
:root[data-theme] body,
:root:not([data-theme='light']):not([data-theme='dark']) body {
  background-color: var(--kids-bg);
  color: var(--kids-text);
}

/* ==========================================================================
   DARK MODE -- cool dark navy, distinct from the adult warm-charcoal dark.
   Applied via [data-theme='dark'] hard-switch AND prefers-color-scheme.
   ========================================================================== */
:root[data-theme='dark'],
html.theme-dark {
  color-scheme: dark;

  --kids-primary:        #7FB0FF; /* lighter blue for AA on dark */
  --kids-primary-hover:  #9AC2FF;
  --kids-primary-active: #B5D3FF;
  --kids-primary-light:  #1B2740;
  --kids-primary-contrast:#0E1522;

  --kids-sunshine:       #FFC846;
  --kids-sunshine-deep:  #FFD576;
  --kids-coral:          #FF7A78;
  --kids-coral-deep:     #FF9B99;

  --kids-green:          #7EDD83;
  --kids-green-deep:     #A6E9A9;
  --kids-green-light:    #16321A;
  --kids-blue:           #7FB0FF;
  --kids-violet:         #B79CF0;
  --kids-violet-light:   #241B3C;

  --kids-bg:             #12161F; /* cool dark navy */
  --kids-surface:        #1C2230;
  --kids-surface-alt:    #262E3E;
  --kids-border:         #2C3547;

  --kids-text:           #EEF3FA;
  --kids-text-light:     #B4C2D6;
  --kids-text-inverse:   #0E1522;
  --kids-footer-bg:      #0F1620;
  --kids-footer-text:    #EAF1FB;
  --kids-footer-link:    #9AC2FF;

  --kids-hero-gradient:  linear-gradient(135deg, #1A2540 0%, #16321A 60%, #2E2A16 100%);
  --kids-hero-border:    #2C3547;

  /* Re-point the bridge tokens to the dark kids values */
  --color-primary:         var(--kids-primary);
  --color-primary-hover:   var(--kids-primary-hover);
  --color-primary-active:  var(--kids-primary-active);
  --color-primary-light:   var(--kids-primary-light);
  --color-primary-contrast:var(--kids-primary-contrast);

  --color-bg:              var(--kids-bg);
  --color-surface:         var(--kids-surface);
  --color-surface-alt:     var(--kids-surface-alt);

  --color-text:            var(--kids-text);
  --color-text-light:      var(--kids-text-light);
  --color-text-link:       var(--kids-primary);
  --color-text-link-hover: var(--kids-primary-hover);

  --color-border:          var(--kids-border);
  --color-border-strong:   #3C475C;
  --color-divider:         var(--kids-border);

  --focus-ring-color:      var(--kids-primary);
  --shadow-focus:          0 0 0 3px var(--kids-primary);

  --brand-teal:            var(--kids-primary);
  --brand-teal-hover:      var(--kids-primary-hover);
  --text-primary:          var(--kids-text);
  --text-secondary:        var(--kids-text-light);
  --text-muted:            var(--kids-text-light);
  --border-color:          var(--kids-border);
}

/* System-preference auto-apply (unless a light hard-switch is set) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']):not(.theme-light) {
    color-scheme: dark;

    --kids-primary:        #7FB0FF;
    --kids-primary-hover:  #9AC2FF;
    --kids-primary-active: #B5D3FF;
    --kids-primary-light:  #1B2740;
    --kids-primary-contrast:#0E1522;

    --kids-sunshine:       #FFC846;
    --kids-sunshine-deep:  #FFD576;
    --kids-coral:          #FF7A78;
    --kids-coral-deep:     #FF9B99;

    --kids-green:          #7EDD83;
    --kids-green-deep:     #A6E9A9;
    --kids-green-light:    #16321A;
    --kids-blue:           #7FB0FF;
    --kids-violet:         #B79CF0;
    --kids-violet-light:   #241B3C;

    --kids-bg:             #12161F;
    --kids-surface:        #1C2230;
    --kids-surface-alt:    #262E3E;
    --kids-border:         #2C3547;

    --kids-text:           #EEF3FA;
    --kids-text-light:     #B4C2D6;
    --kids-text-inverse:   #0E1522;
    --kids-footer-bg:      #0F1620;
  --kids-footer-text:    #EAF1FB;
  --kids-footer-link:    #9AC2FF;

    --kids-hero-gradient:  linear-gradient(135deg, #1A2540 0%, #16321A 60%, #2E2A16 100%);
    --kids-hero-border:    #2C3547;

    --color-primary:         var(--kids-primary);
    --color-primary-hover:   var(--kids-primary-hover);
    --color-primary-active:  var(--kids-primary-active);
    --color-primary-light:   var(--kids-primary-light);
    --color-primary-contrast:var(--kids-primary-contrast);

    --color-bg:              var(--kids-bg);
    --color-surface:         var(--kids-surface);
    --color-surface-alt:     var(--kids-surface-alt);

    --color-text:            var(--kids-text);
    --color-text-light:      var(--kids-text-light);
    --color-text-link:       var(--kids-primary);
    --color-text-link-hover: var(--kids-primary-hover);

    --color-border:          var(--kids-border);
    --color-border-strong:   #3C475C;
    --color-divider:         var(--kids-border);

    --focus-ring-color:      var(--kids-primary);
    --shadow-focus:          0 0 0 3px var(--kids-primary);

    --brand-teal:            var(--kids-primary);
    --brand-teal-hover:      var(--kids-primary-hover);
    --text-primary:          var(--kids-text);
    --text-secondary:        var(--kids-text-light);
    --text-muted:            var(--kids-text-light);
    --border-color:          var(--kids-border);
  }
}

/* ==========================================================================
   FOOTER -- asserted at high specificity so the adult `[data-theme="dark"]
   footer p` rule (which recolours paragraphs to grey) cannot override the
   kids footer text/link colours. Stable deep-navy slab in both themes.
   ========================================================================== */
.kids-footer,
:root[data-theme] .kids-footer {
  background: var(--kids-footer-bg);
  color: var(--kids-footer-text);
}
:root .kids-footer p,
:root[data-theme] .kids-footer p {
  color: var(--kids-footer-text);
}
:root .kids-footer a,
:root[data-theme] .kids-footer a {
  color: var(--kids-footer-link);
  text-decoration: underline;
}