/* ============================================================
   zum eibach — Color tokens
   Warm, human, Swiss. Magenta as the signature accent; a friendly
   sky-to-deep blue for calls to action; deep teal for headings;
   cream + warm grays for calm, residential surfaces.
   ============================================================ */

:root {
  /* ---- Brand: signature magenta (the dot, the circles, numbers) ---- */
  --eibach-magenta:        #D60D52;
  --eibach-magenta-dark:   #B80A46;
  --eibach-magenta-tint:   #FBE6EE;

  /* ---- Brand: blue (CTA + logo gradient + stats band) ---- */
  --eibach-blue:           #0C9FE3;  /* primary action */
  --eibach-blue-dark:      #086F9F;  /* gradient end / hover */
  --eibach-cyan:           #5FC3E1;  /* logo highlight */
  --eibach-teal-deep:      #17608A;  /* section headings */
  --eibach-navy:           #19385F;  /* logo gradient dark */

  /* ---- Warm neutrals (residential, calm) ---- */
  --warm-900:              #1D1D1B;  /* near-black */
  --warm-700:              #4A4843;  /* primary body text */
  --warm-600:              #54533C;  /* olive image overlay */
  --warm-500:              #69675C;  /* muted text */
  --warm-400:              #7C7C7B;  /* captions, meta */
  --sand:                  #AEA184;  /* divider lines, tan accent */

  /* ---- Surfaces ---- */
  --cream:                 #F6F3EC;  /* primary warm surface */
  --gray-100:              #F3F3F3;
  --gray-200:              #ECECEC;
  --gray-300:              #D9D9D9;  /* placeholders, icon wells */
  --border-subtle:         #E0DEDB;
  --white:                 #FFFFFF;
  --black:                 #000000;

  /* ---- Status ---- */
  --status-success:        #10B981;
  --status-warning:        #F59E0B;
  --status-error:          #E11D48;
  --status-info:           var(--eibach-blue);

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */
  --color-bg:              var(--white);
  --surface-card:          var(--white);
  --surface-warm:          var(--cream);
  --surface-muted:         var(--gray-100);
  --surface-well:          var(--gray-300);

  --text-body:             var(--warm-700);
  --text-heading:          var(--eibach-teal-deep);
  --text-strong:           var(--warm-900);
  --text-muted:            var(--warm-500);
  --text-on-dark:          var(--cream);
  --text-accent:           var(--eibach-magenta);
  --text-eyebrow:          #21333A;

  --color-primary:         var(--eibach-blue);
  --color-primary-hover:   var(--eibach-blue-dark);
  --color-on-primary:      var(--cream);
  --color-accent:          var(--eibach-magenta);
  --color-accent-hover:    var(--eibach-magenta-dark);

  --border-default:        var(--border-subtle);
  --divider:               var(--sand);

  /* ---- Signature gradients ---- */
  --gradient-stats:        linear-gradient(180deg, #0C9FE3 0%, #086F9F 84%); /* @kind color */
  --gradient-image-veil:   linear-gradient(180deg, rgba(84,83,60,0) 0%, rgba(84,83,60,.7) 50%, rgba(84,83,60,1) 100%); /* @kind color */
  --gradient-hero-veil:    linear-gradient(104deg, rgba(54,52,39,.40) 8%, rgba(67,60,19,0) 64%),
                           linear-gradient(90deg, rgba(93,81,71,.60) 4%, rgba(195,171,149,.12) 75%); /* @kind color */
}