:root {
  /* Background */
  --background-light: #e0d5d1;
  --background-img: url("https://cloverbar.com.ar/app/public/media/ui/wpp/wallpaper-1.webp");
  --background-dark: #111;
  --backdrop-filter: brightness(50%);

  /* Header */
  --header-bg: #111;
  --header-bg-img: unset;
  --header-nav-bg: #222;
  --background-img-header: url("");
  --nav-color: var(--color-light);
  --header-height: 60px;
  --header-padding: 0 25px;

  /* Brand */
  --color-brand: #e6b455;
  --color-brand-second: #39150e;
  --color-brand-third: #bd6552;
  --color-success: rgb(53, 147, 53);
  --color-error: #bf1908;
  --color-warning: orange;

  --color-border: #333;
  --color-dark: #222;
  --color-light: #eee;

   /* brand ui*/
  --font-family: "Montserrat", "Helvetica", sans-serif;
  --font-family-title: "Righteous", "Helvetica", sans-serif;
  --font-family-subtitle: "Oswald", "monospace", sans-serif;
  --title-color: var(--color-brand);

  /* Input config */
  --input-backgroud: #ccc;
  --input-background-odd: #c2c2c2;
  --input-border: none;
  --input-border-radius: 0px;
  --input-color: var(--color-dark);
  --input-padding: 20px;

  /* Button config */
  --border-display: 5px solid;
  --border-color: var(--color-success);
  --button-backgroud: var(--color-success);
  --button-border: var(--border-display) var(--border-color);
  --button-border-radius: 10px;
  --button-color: var(--color-light);
  --button-font-weight: var(--font-weight-l);

  /* Button Secondary */
  --button-secondary-border: var(--border-display) var(--color-dark);
  --button-secondary-background: transparent;
  --button-secondary-color: var(--color-dark);

  /* Button Warning */
  --button-warning-border: var(--border-display) var(--color-warning);
  --button-warning-background: var(--color-warning);
  --button-warning-color: var(--color-light);

  /* Tab */
  --tab-bg-color: #222;
  --tab-btn-bg-color: #444;
  --tab-bottom: 0px;
  --tab-left: unset;
  --tab-right: unset;
  --tab-top: unset;
  --tab-btn-border-radius: 0px;
  --tab-padding: 10px;

  /* Tab btn */
  --tab-btn-border-radius: 50px;
  --tab-btn-color: var(--color-brand);
  --tab-btn-font-weight: 600;
  --tab-btn-font-size: inherit;
  --tab-btn-border: 0;
  --tab-btn-padding: 5px 10px;
  --tab-btn-letter-spacing: 3px;
  --tab-content-height: clamp(100vh, auto, auto);
  --tab-content-padding: 0 0 100px 0;

  /* Table */
  --head-background: #ddd;
  --body-background: #fff;
  --body-odd-background: #eee;
  --table-border: 1px solid #888;
  --table-border: 0px;
  --table-inner-border: 1px solid #aaa;
  --table-inner-border: 0px;
  --table-border-radius: 10px;

  /* Form */
  --form-bg: #ddd;
  --form-bg-img: unset;
  --form-width:  clamp(336px, 78%, 671px);
  --form-gap: 20px;
  --form-padding: 20px;
  --form-border-radius: 10px;
  --form-border: 0px;
  --form-shadow: unset;
}