/* ============================================================
   helomi — Colors
   Brand palette (from 2024 Helomi CI/CD):
     • Mocha brown  #9d7a6d  (PANTONE P 44-9 C)  — primary
     • Peach        #f9c2ab  (PANTONE P 57-1 C)  — accent (the alpaca's face/ears)
     • Black        #000000  — outlines, logo tagline, hard contrast
   Tonal scales below are derived to extend the two brand hues into
   usable ramps. Functional/semantic colors (success, etc.) are
   derived to harmonize and are NOT part of the original CI/CD —
   see readme "Visual foundations".
   ============================================================ */
:root {
  /* ---- Mocha (primary brand brown) ---- */
  --mocha-50:  #f7f2f0;
  --mocha-100: #ece0db;
  --mocha-200: #dac7bd;
  --mocha-300: #c3a89c;
  --mocha-400: #ae9084;
  --mocha-500: #9d7a6d; /* brand */
  --mocha-600: #87655a;
  --mocha-700: #6d5147;
  --mocha-800: #523d36;
  --mocha-900: #382a25;

  /* ---- Peach (brand accent) ---- */
  --peach-50:  #fef6f2;
  --peach-100: #fde8df;
  --peach-200: #fbd6c6;
  --peach-300: #f9c2ab; /* brand */
  --peach-400: #f4a888;
  --peach-500: #ee8a63;
  --peach-600: #df6b41;
  --peach-700: #bd5430;
  --peach-800: #934229;
  --peach-900: #6b3322;

  /* ---- Warm neutrals (greys tinted toward the mocha) ---- */
  --white:     #ffffff;
  --sand-50:   #faf8f7;
  --sand-100:  #f3efed;
  --sand-200:  #e7e1dd;
  --sand-300:  #d4cbc5;
  --sand-400:  #aaa099;
  --sand-500:  #7d736c;
  --sand-600:  #5b524d;
  --sand-700:  #423b37;
  --sand-800:  #2a2522;
  --sand-900:  #1a1614;
  --black:     #000000;

  /* ---- Functional (derived — not in original CI/CD) ---- */
  --frost-100: #e4f1f3; /* cool tint — nods to the "Kühl" product */
  --frost-300: #9fcdd6;
  --frost-500: #4a9aa8;
  --success-100: #e3f1e4;
  --success-500: #4f9d5b;
  --success-700: #357040;
  --warning-100: #fdeed2;
  --warning-500: #e0a236;
  --warning-700: #9c6c14;
  --danger-100:  #fbe2dd;
  --danger-500:  #d65b45;
  --danger-700:  #9c3724;

  /* ============================================================
     Semantic aliases — reference these in components, not raw scales
     ============================================================ */
  --color-primary:        var(--mocha-500);
  --color-primary-hover:   var(--mocha-600);
  --color-primary-active:  var(--mocha-700);
  --color-primary-soft:    var(--mocha-100);

  --color-accent:          var(--peach-300);
  --color-accent-hover:    var(--peach-400);
  --color-accent-strong:   var(--peach-600);
  --color-accent-soft:     var(--peach-100);

  --color-ink:             var(--black);      /* outlines, sticker borders, tagline */
  --color-text:            var(--sand-900);   /* default body text */
  --color-text-muted:      var(--sand-500);
  --color-text-subtle:     var(--sand-400);
  --color-text-on-primary: var(--white);
  --color-text-on-accent:  var(--sand-900);

  --color-bg:              var(--sand-50);
  --color-bg-warm:         var(--mocha-50);
  --color-surface:         var(--white);
  --color-surface-sunken:  var(--sand-100);

  --color-border:          var(--sand-200);
  --color-border-strong:   var(--sand-300);
  --color-focus-ring:      var(--mocha-500);

  --color-link:            var(--mocha-700);
  --color-link-hover:      var(--mocha-800);
}