/* ==========================================================================
   Kaleidoscope Systems — Color tokens
   --------------------------------------------------------------------------
   A calm, warm, accessible palette. Warm paper neutrals carry the surfaces;
   a deep teal anchors the brand (systems thinking, growth, calm focus); a
   curated set of muted jewel tones is the "kaleidoscope" — used sparingly to
   color-code content areas, never to decorate. Every text pairing below
   meets WCAG AA on its intended surface.
   ========================================================================== */

:root {
  /* --- Warm neutral ramp (paper → ink) ------------------------------------ */
  --paper-50:  #FCFAF6;   /* app background, lightest */
  --paper-100: #F6F1E9;   /* sunken / subtle fill */
  --paper-200: #ECE4D7;   /* hairline fills, hover wells */
  --paper-300: #DCD1BF;   /* borders on warm surfaces */
  --paper-400: #C3B6A0;   /* disabled strokes */

  --ink-900: #211E1A;     /* primary text */
  --ink-700: #423C34;     /* strong body */
  --ink-500: #6B6256;     /* secondary text */
  --ink-400: #756D5E;     /* muted / placeholder — darkened to meet AA (≈4.9:1 on paper) */
  --white:   #FFFFFF;

  /* --- Brand primary: deep teal ------------------------------------------- */
  --teal-50:  #E6F0ED;
  --teal-100: #C6DED8;
  --teal-300: #6FA89C;
  --teal-500: #2E6B5E;    /* PRIMARY */
  --teal-600: #245A4E;
  --teal-700: #1B453C;    /* hover/pressed text on light */

  /* --- Kaleidoscope category accents (muted jewel tones) ------------------ */
  --clay-500:     #C75D43;   /* Community Building / warmth */
  --clay-100:     #F5DED6;
  --marigold-500: #D99636;   /* Curiosity / Leadership */
  --marigold-100: #F7E7CB;
  --plum-500:     #7C5680;   /* Neurodiversity / depth */
  --plum-100:     #EBDFEC;
  --slate-500:    #3E6B8C;   /* Systems Thinking / governance */
  --slate-100:    #DCE6EE;
  --moss-500:     #6E8B4A;   /* Growth / Cognitive Ecology */
  --moss-100:     #E4EAD6;
  --rose-500:     #B5526B;   /* Trauma-Informed / The Lost Girls */
  --rose-100:     #F3DEE4;

  /* --- Semantic status ---------------------------------------------------- */
  --success-500: #4F7A43;
  --success-100: #E1ECD9;
  --warning-500: #C9882B;
  --warning-100: #F7E8CA;
  --danger-500:  #B23B2E;
  --danger-100:  #F4DCD8;
  --info-500:    #3E6B8C;
  --info-100:    #DCE6EE;

  /* ======================================================================
     SEMANTIC ALIASES — reference these in components, not the raw ramps.
     ====================================================================== */
  --bg-app:        var(--paper-50);
  --bg-sunken:     var(--paper-100);
  --surface-card:  var(--white);
  --surface-raised:var(--white);
  --surface-well:  var(--paper-100);
  --surface-hover: var(--paper-200);

  --text-primary:   var(--ink-900);
  --text-body:      var(--ink-700);
  --text-secondary: var(--ink-500);
  --text-muted:     var(--ink-400);
  --text-on-brand:  var(--white);
  --text-link:      var(--teal-600);

  --border-subtle:  var(--paper-200);
  --border-default: var(--paper-300);
  --border-strong:  var(--paper-400);
  --border-focus:   var(--teal-500);

  --brand:          var(--teal-500);
  --brand-hover:    var(--teal-600);
  --brand-pressed:  var(--teal-700);
  --brand-tint:     var(--teal-50);

  /* Focus ring — high-contrast, always visible (accessibility-first) */
  --focus-ring: 0 0 0 3px var(--paper-50), 0 0 0 5.5px var(--teal-500);
}