/* ==========================================================================
   Endl — Color tokens
   --------------------------------------------------------------------------
   Layer 1 = raw brand values (the "what"). Layer 2 = semantic aliases (the
   "where"). Always consume semantic tokens in components; reach for raw
   values only when a semantic alias does not exist.

   Golden rules (from the brand guide):
     • Text is #181719, NEVER pure #000.
     • One brand-blue moment per surface. Blue is action/emphasis, not paint.
     • Secondary families (purple/green/yellow/orange) exist for CATEGORIZATION,
       not decoration. Never two 500s from different families on one surface.
   ========================================================================== */

:root {
  /* ---- Brand blue ---------------------------------------------------- */
  --blue-50:   #DCF1FF;   /* wash / hero background */
  --blue-200:  #9EC8FF;   /* chip fill / illustration midtone */
  --blue-500:  #245FFF;   /* PRIMARY — CTAs, logo, accent word, icon fill */
  --blue-600:  #1E4ED8;   /* hover only — never at rest */

  /* ---- Ink (text) ---------------------------------------------------- */
  --ink-900:   #181719;   /* primary text — the brand "black" */
  --ink-700:   #34343A;   /* secondary / muted body, captions */
  --ink-500:   #555555;   /* tertiary labels (infographic ink-muted) */
  --ink-300:   #888888;   /* faint / eyebrow (infographic ink-faint) */
  --ink-1000:  #0A0A0A;   /* infographic display ink (titles, hero values) */

  /* ---- Neutrals / surfaces ------------------------------------------- */
  --white:       #FFFFFF;
  --surface-50:  #F9F9F9;   /* card background on white */
  --surface-100: #F0F0F0;   /* darker surface / hover */
  --surface-200: #F4F4F5;   /* section divider, footer block */
  --border:      #E8E8E8;   /* hairline border — 1px only, oklch(0.922 0 0) */
  --border-strong: #D1D5DB; /* button outline border (a touch darker) */

  /* ---- Secondary categorization families (50 / 200 / 500) ------------ */
  /* Purple — innovation, "what's next" */
  --purple-50:  #F1E4FF;
  --purple-200: #BE8DFE;
  --purple-500: #772BD8;
  /* Green — savings, growth, success, positive delta */
  --green-50:   #E2F5EE;
  --green-200:  #A3E0C9;
  --green-500:  #0C9C64;
  /* Yellow / Gold — optimism, market upside */
  --yellow-50:  #FFF8E0;
  --yellow-200: #F1D9B4;
  --yellow-500: #CC9945;
  /* Orange — friction, cost, urgency, the "old way" */
  --orange-50:  #FFE2CF;
  --orange-200: #F4C39D;
  --orange-500: #E48755;

  /* ---- Infographic palette variants (blog skill) --------------------- */
  /* Slightly softer bg/mid tones tuned for full-figure muted backgrounds.
     accent values match the categorization 500s above. */
  --info-orange-bg:  #FFEDE1;  --info-orange-mid: #FFD2B5;  --info-orange-accent: #E29460;
  --info-translucent-surface: rgba(255, 255, 255, 0.55); /* lets bg tint show through */

  /* ======================================================================
     SEMANTIC ALIASES
     ====================================================================== */
  /* Text */
  --text-primary:    var(--ink-900);
  --text-secondary:  var(--ink-700);
  --text-tertiary:   var(--ink-500);
  --text-faint:      var(--ink-300);
  --text-on-accent:  var(--white);
  --text-accent:     var(--blue-500);

  /* Backgrounds & surfaces */
  --bg-page:         var(--white);
  --surface-card:    var(--surface-50);
  --surface-sunken:  var(--surface-200);
  --surface-hover:   var(--surface-100);

  /* Brand action */
  --accent:          var(--blue-500);
  --accent-hover:    var(--blue-600);
  --accent-wash:     var(--blue-50);

  /* Lines */
  --border-hairline: var(--border);
  --border-control:  var(--border-strong);
  --border-focus:    var(--blue-500);

  /* Semantic status (mapped onto categorization families) */
  --success:         var(--green-500);
  --success-wash:    var(--green-50);
  --warning:         var(--yellow-500);
  --warning-wash:    var(--yellow-50);
  --danger:          var(--orange-500);
  --danger-wash:     var(--orange-50);
  --info:            var(--purple-500);
  --info-wash:       var(--purple-50);
}