:root {

  /* -------- variable for color -------- */


  --color-background:     3,3,3;   /* main page background  21, 21, 21; */
  --color-surface:        246, 243, 237; /* elevated blocks/cards 248, 248, 246 */
  --color-surface-muted:  58, 54, 49;   /* disabled / low elevation */

  --color-accent-mix:     28, 63, 42;   /* accent color for 5+5 */
  --color-accent-low:     40, 42, 54;   /* accent color for 17.5% */
  --color-accent-high:    246, 148, 77;   /* accent color for 22.5% */

  --color-txt:           36, 33, 30;   /* primary readable text 245,240,230; */
  --color-txt-muted:     106, 106, 106;   /* secondary info text */

  --color-shadow:         21, 21, 21;   /* base shadow color (for .shadow- classes) */

  --color-button:         255, 255, 255;   /* default button background */

  

  --color-border:         200, 200, 200;   /* generic component borders */
  --color-overlay:        23, 23, 23;   /* modal/popup background overlay */
 
  --color-primary:        105, 76, 53;   /* brand base color / call-to-action */

  --color-success:        56, 178, 104;  /* success states (✔ confirmed, ok) */
  --color-error:          168, 96, 96; /* error states (✖ failed, danger) */
  --color-warning:        217, 162, 130;   /* warning / caution messages */
  --color-info:           32, 35, 38;   /* info banners, tooltips, etc */

  --color-button-hover:   85, 60, 40;   /* hover state button */

  --color-input:          196, 195, 191;   /* input field background */
  --color-input-border:   180, 180, 180;   /* input borders */
  --color-input-focus:    105, 76, 53;   /* focus ring color */

  --color-highlight:      242, 237, 228;   /* highlight bg (for Event Card Findwo) */
  --color-disabled:       200, 200, 200;   /* disabled button/form fields */

  --color-selection:      255, 255, 150;   /* text selection bg color */
  --color-focus:          255, 200, 50;   /* outline for :focus-visible */
  --color-loader:         105, 76, 53;   /* spinners/loaders */
  --color-tag:            230, 230, 230;   /* badge / tag bg */
  --color-link:           0, 0, 0;   /* link color (optional alias of accent) */
  --color-link-hover:     0, 0, 0;   /* link color (optional alias of accent) */


  --color-pulse-fill:     245,240,230;  
}