/* ==========================================================================
   Pattyn — Colour tokens
   Source: PATTYN_STYLEGUIDE_10-2020 (exact RGB / HEX values from the guide)
   ========================================================================== */
:root {
  /* ---- Brand palette (verbatim from styleguide) ---------------------- */
  --pattyn-charcoal:    #323232;  /* Dark grey   · RGB 50 50 50   · PMS Black 7U */
  --pattyn-blue:        #32A0FF;  /* Jeans blue  · RGB 50 160 255 · PMS 2191 U   */
  --pattyn-vermilion:   #FF694B;  /* Vermilion   · RGB 255 105 75 · PMS 172 U    */
  --pattyn-honey:       #FFB400;  /* Honey yellow· RGB 255 180 0  · PMS 116 U    */

  /* ---- Charcoal ramp (derived; charcoal is the only true brand neutral) */
  --charcoal-900: #1c1c1c;
  --charcoal-800: #262626;
  --charcoal-700: #323232;  /* = brand charcoal */
  --charcoal-600: #4a4a4a;
  --charcoal-500: #6b6b6b;
  --charcoal-400: #909090;
  --charcoal-300: #b8b8b8;
  --charcoal-200: #d6d6d6;
  --charcoal-150: #e3e3e3;
  --charcoal-100: #ededed;  /* page / panel grey used throughout the folder */
  --charcoal-50:  #f5f5f5;
  --white:        #ffffff;

  /* ---- Vermilion ramp (primary accent) ------------------------------- */
  --vermilion-700: #e5482b;
  --vermilion-600: #fb5638;
  --vermilion-500: #ff694b;  /* = brand vermilion */
  --vermilion-300: #ff9d88;
  --vermilion-100: #ffe5de;
  --vermilion-50:  #fff3f0;

  /* ---- Blue ramp ----------------------------------------------------- */
  --blue-600: #1786ec;
  --blue-500: #32a0ff;  /* = brand blue */
  --blue-100: #d8edff;
  --blue-50:  #eef7ff;

  /* ---- Honey ramp ---------------------------------------------------- */
  --honey-600: #e6a200;
  --honey-500: #ffb400;  /* = brand honey */
  --honey-100: #fff0cc;
  --honey-50:  #fff9eb;

  /* ---- Energy-label green (A++ badge in collateral) ------------------ */
  --energy-green: #4caf2f;

  /* =====================================================================
     Semantic aliases — reference these in components, not raw ramps
     ===================================================================== */

  /* Text */
  --text-strong:    var(--charcoal-700);
  --text-body:      var(--charcoal-600);
  --text-muted:     var(--charcoal-500);
  --text-on-dark:   var(--white);
  --text-on-accent: var(--white);
  --text-accent:    var(--vermilion-500);

  /* Surfaces */
  --surface-page:   var(--white);
  --surface-panel:  var(--charcoal-100);  /* the light-grey blocks */
  --surface-card:   var(--white);
  --surface-dark:   var(--charcoal-700);
  --surface-inset:  var(--charcoal-50);

  /* Lines & borders */
  --border-hairline: var(--charcoal-150);
  --border-default:  var(--charcoal-200);
  --rule:            var(--charcoal-200);  /* the thin header/footer rules */

  /* Primary action (vermilion) */
  --action:          var(--vermilion-500);
  --action-hover:    var(--vermilion-600);
  --action-press:    var(--vermilion-700);
  --action-soft:     var(--vermilion-100);
  --action-soft-bg:  var(--vermilion-50);

  /* Product accents (map to the four brand line-icons) */
  --accent-heat:  var(--vermilion-500);  /* flame  · warmtepompen / ketels */
  --accent-cool:  var(--blue-500);       /* snow   · airco                 */
  --accent-solar: var(--honey-500);      /* sun    · zonnepanelen          */
  --accent-water: var(--vermilion-600);  /* drop   · boilers               */

  /* Focus ring */
  --focus-ring: var(--blue-500);
}