/* ============================================================
   COLOR SYSTEM  —  Code Wiz Brand Identity Refresh (March 2026)
   Core: WIZ Deep, WIZ Bright, WIZ Fun  (use in most designs)
   Secondary: WIZ Fresh, WIZ Pop  (ONE per design, never both)
   WIZ Ink: body text.
   ============================================================ */

:root {
  /* ---- Core brand palette (raw) ---- */
  --wiz-deep:   #041a71; /* confident, trustworthy navy — serious learning   */
  --wiz-bright: #7dd3fc; /* friendly sky blue — smart outcomes                */
  --wiz-fun:    #ff9f1c; /* golden orange — CTAs & highlights, enjoyable      */

  /* ---- Secondary accents (one per design) ---- */
  --wiz-fresh:  #84cc16; /* lime green — new skills, growth                   */
  --wiz-pop:    #ff4d8d; /* pink — creativity, expression                     */

  /* ---- Neutral / text ---- */
  --wiz-ink:    #334155; /* blue-gray body text — softer than black          */

  /* ---- Deep tints & shades (derived, harmonious with WIZ Deep) ---- */
  --wiz-deep-900: #030f47;
  --wiz-deep-800: #041a71; /* = WIZ Deep */
  --wiz-deep-700: #0a2a94;
  --wiz-deep-600: #143bb0;
  --wiz-deep-500: #2450c9;

  /* ---- Bright tints ---- */
  --wiz-bright-300: #7dd3fc; /* = WIZ Bright */
  --wiz-bright-200: #b6e6fe;
  --wiz-bright-100: #e0f5ff;

  /* ---- Fun tints/shades ---- */
  --wiz-fun-600: #e07d00;
  --wiz-fun-500: #ff9f1c; /* = WIZ Fun */
  --wiz-fun-200: #ffdca3;
  --wiz-fun-100: #fff3df;

  /* ---- Neutrals / surfaces ---- */
  --wiz-white:   #ffffff;
  --wiz-mist:    #f5f9ff; /* very light blue-white section wash              */
  --wiz-cloud:   #f8fafc; /* card interior off-white                          */
  --wiz-line:    #e2e8f0; /* hairline borders                                 */
  --wiz-ink-300: #94a3b8; /* muted / placeholder text                         */
  --wiz-ink-200: #cbd5e1;

  /* ============================================================
     SEMANTIC ALIASES  — reference these in components/screens
     ============================================================ */

  /* Text */
  --text-heading:     var(--wiz-deep);
  --text-body:        var(--wiz-ink);
  --text-muted:       var(--wiz-ink-300);
  --text-on-deep:     var(--wiz-white);   /* text on navy backgrounds        */
  --text-on-fun:      var(--wiz-deep);    /* text on orange (navy reads best) */
  --text-link:        var(--wiz-deep);

  /* Surfaces / backgrounds */
  --surface-page:     var(--wiz-white);
  --surface-wash:     var(--wiz-mist);
  --surface-card:     var(--wiz-cloud);
  --surface-deep:     var(--wiz-deep);    /* navy feature sections            */
  --surface-bright:   var(--wiz-bright-100);

  /* Interactive */
  --action-primary:        var(--wiz-fun);       /* orange pill CTA           */
  --action-primary-hover:  var(--wiz-fun-600);
  --action-primary-text:   var(--wiz-deep);
  --action-secondary:      var(--wiz-deep);      /* navy button               */
  --action-secondary-hover:var(--wiz-deep-700);
  --action-secondary-text: var(--wiz-white);

  /* Borders / lines */
  --border-subtle:    var(--wiz-line);
  --border-strong:    var(--wiz-deep);

  /* Pathway / program identity colors (used for icon circles, tags) */
  --path-foundational: var(--wiz-fresh); /* green  — Foundational Coding      */
  --path-game:         var(--wiz-fun);   /* orange — Game Development          */
  --path-robotics:     var(--wiz-bright);/* blue   — Physical Computing        */
  --path-ai:           var(--wiz-pop);   /* pink   — Artificial Intelligence   */

  /* Achievement levels */
  --level-explorer:  var(--wiz-fresh);
  --level-creator:   var(--wiz-fun);
  --level-innovator: var(--wiz-bright);

  /* Semantic status (kept on-brand) */
  --status-success: var(--wiz-fresh);
  --status-warning: var(--wiz-fun);
  --status-error:   var(--wiz-pop);
  --status-info:    var(--wiz-bright);

  /* Focus ring */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--wiz-bright) 70%, transparent);
}