/**
 * @file
 * CSS for CSS variables.
 */




/**
 * ===== CSS VARIABLES =====
 */


/**/
:root {


  /**/
  --site--body--back-color--01: #F2F2F2;
  --site--body--back-color--02: #FFFFFF;


  /**/
  --site--body--text-color--01: #222222;
  --site--body--text-color--02: #4A4A4A;


  /**/
  --site--body--link-color--01: hsl(350, 90%, 60%)/*hsl(215, 100%, 50%)*/;
  --site--body--link-color--02: hsl(215, 100%, 50%);


  /**/
  --site--form--back-color--01: #FFFFFF;
  --site--form--back-color--02: #FFFFCC;
  --site--form--border-color--01: #DDDDDD;
  --site--form--border-color--01: #CCCCCC;


  /* MAIN - GRAY */
  --site--main--color--00-01: #EEEEEE;
  --site--main--color--00-02: #CCCCCC;
  --site--main--color--00-03: #333333;
  --site--main--color--00-04: #333333;
  --site--main--color--00-05: #222222;


  /* MAIN - RED */
  --site--main--color--01-01: hsl(350, 90%, 30%);
  --site--main--color--01-02: hsl(350, 90%, 60%);
  --site--main--color--01-03: hsl(350, 90%, 70%);
  --site--main--color--01-04: hsl(350, 100%, 85%);
  --site--main--color--01-05: hsl(350, 90%, 95%);


  /* MAIN - YELLOW  */
  --site--main--color--02-01: hsl(280, 90%, 30%);
  --site--main--color--02-02: hsl(280, 90%, 50%);
  --site--main--color--02-03: hsl(280, 90%, 60%);
  --site--main--color--02-04: hsl(280, 80%, 83%);
  --site--main--color--02-05: hsl(280, 60%, 96%);


  /* MAIN - GREEN  */
  --site--main--color--03-01: hsl(150, 60%, 25%);
  --site--main--color--03-02: hsl(150, 60%, 50%);
  --site--main--color--03-03: hsl(150, 60%, 60%);
  --site--main--color--03-04: hsl(150, 90%, 85%);
  --site--main--color--03-05: hsl(150, 90%, 94%);


  /* MAIN - BLUE */
  --site--main--color--04-01: hsl(215, 100%, 30%);
  --site--main--color--04-02: hsl(215, 100%, 50%);
  --site--main--color--04-03: hsl(215, 100%, 60%);
  --site--main--color--04-04: hsl(210, 100%, 85%);
  --site--main--color--04-05: hsl(210, 100%, 95%);


  /* ===== HLFM - SEASONAL ===== */

  /**
   * === SEASON COLOR-MODE 01 === 
   */
  
  /**
    * HLFM - SEASONAL: Red Dark 
    */
  --site--seasonal-text: rgba(237, 20, 91,1.0);
  /** 
    * HLFM - SEASONAL: Yellow Light 
    */
  --site--seasonal-main-background: rgba(255, 252, 221,1.0); 

  /**
   * === SEASON COLOR-MODE 02 === 
   */
  
  /** 
   * HLFM - SEASONAL: Orange Dark 
   */
  /*
  --site--seasonal-text: rgba(239, 104, 45,1.0);
  */

  /**
   * HLFM - SEASONAL: Pink Light 
   */
  /*
  --site--seasonal-main-background: rgba(245, 266, 239,1.0);
  */ 

  /**
   * === SEASON COLOR-MODE 03 ===
   */

  /**
   * HLFM - SEASONAL: Green Dark 
   */
  /*
  --site--seasonal-text: rgba(237, 20, 91,1.0);
  */ 
  /**
   *  HLFM - SEASONAL: Green Light 
   */
  /*
  --site--seasonal-main-background: rgba(234, 248, 236,1.0);
  */ 


  /* ===== HLFM - STATIC ===== */
  --site--static--background-01: rgba(254, 236, 234,1.0); /* HLFM - STATIC: Red Light */
  --site--static--background-02: rgba(221, 241, 247,1.0); /* HLFM - STATIC: Blue Light */
  --site--static--background-03: rgba(224, 241, 237,1.0); /* HLFM - STATIC: Green Light */
  --site--static--background-04: rgba(228, 235, 233,1.0); /* HLFM - STATIC: Grey Light */
  --site--static--background-05: rgba(102, 102, 102,1.0); /* HLFM - STATIC: Grey Dark */
  --site--static--hover-background-01: rgba(102, 102, 102,0.7); /* HLFM - STATIC: Grey Dark - transparent */
  --site--static--hover-background-02: rgba(228, 235, 233,0.8); /* HLFM - STATIC: Grey Light - transparent */

}


/* media */
@media (prefers-color-scheme:dark) {

  /**/
  :root {


    /**/
    --site--body--back-color--01: #333333 /* #222222 */;
    --site--body--back-color--02: #222222 /* #333333 */;


    /**/
    --site--body--text-color--01: #FFFFFF;
    --site--body--text-color--02: #FFFFFF;


    /**/
    --site--body--link-color--01: #FFFFFF;
    --site--body--link-color--02: #FFFFFF;

  /* ===== HLFM - SEASONAL ===== */

  /* SEASON COLOR-MODE 01 */
  --site--seasonal-text: rgba(148, 216, 229,1.0); /* HLFM - SEASONAL: Red Dark */
  --site--seasonal-main-background: #333333; /* HLFM - SEASONAL: Yellow Light */

  /* SEASON COLOR-MODE 02 */
  /*
  --site--seasonal-text: rgba(231, 156, 195,1.0);*/ /* HLFM - SEASONAL: Pink Dark Mode */
  /*
  --site--seasonal-main-background: #333333;*/ /* HLFM - SEASONAL: Grey Dark Mode */

    /* SEASON COLOR-MODE 03 */
  /*
  --site--seasonal-text: rgba(237, 20, 91,1.0);*/ /* HLFM - SEASONAL: Green Dark Mode */
  /*
  --site--seasonal-main-background: #333333;*/ /* HLFM - SEASONAL: Grey Dark Mode */


  /* ===== HLFM - STATIC ===== */
  --site--static--background-01: #333333 /* HLFM - STATIC: Red Light */;
  --site--static--background-02: #333333 /* HLFM - STATIC: Blue Light */;
  --site--static--background-03: #333333 /* HLFM - STATIC: Green Light */;
  --site--static--background-04: #333333 /* HLFM - STATIC: Grey Light */;
  --site--static--background-05: #FFFFFF /* HLFM - STATIC: Grey Dark */;

}