:root {

  /* ================================================================
    UI BRAND TOKENS (PRIMARY / SECONDARY / DEFAULT)
  ================================================================ */
  --ui-color-primary: #26292d;
  --ui-color-primary-bg: #26292d;
  --ui-color-primary-text: #fff;
  --ui-color-primary-border: #26292d;

  --ui-color-secondary: #d7d7d7;
  --ui-color-secondary-bg: #d7d7d7;
  --ui-color-secondary-text: #26292d;
  --ui-color-secondary-border: #d7d7d7;

  --ui-color-default: #2770b5;
  --ui-color-default-bg: #2770b5;
  --ui-color-default-text: #fff;
  --ui-color-default-border: #2770b5;
  

  /* ================================================================
    SEMANTIC — BORDER
  ================================================================ */
  --border-default: #d7d7d7;
  --border-subtle: #e5e5e5;
  --border-strong: #26292d;

  /* ================================================================
    SEMANTIC — TEXT
  ================================================================ */
  --text-primary: #26292d;
  --text-inverse: #fff;
  --text-secondary: #6d6d6d;
  --text-muted: #e5e5e5;
  --text-soft: #ffffff5e;
  --text-placeholder: #999;


  /* ================================================================
    SEMANTIC — BACKGROUND
  ================================================================ */
  --bg-primary: #26292d;
  --bg-primary-soft: #ffffff5e;
  --bg-surface: #fff;
  --bg-surface-secondary: #e5e5e5;
  --bg-surface-secondary-soft: #f3f3f3;
  --bg-page: #FBFBFB;
  --bg-disabled: #bcb7b749;

  /* ================================================================
    SHADOW
  ================================================================ */
  --shadow-soft: #e9e9e9;
  --shadow-strong: #26292d;

  /* ================================================================
    FORM TOKENS
  ================================================================ */
  --input-border-focus: #c1c1c1;
  --input-text: #26292d;
  --input-bg: #eeeeee61;
  --input-border: #d7d7d7;


  /* ================================================================
    TYPOGRAPHY
  ================================================================ */
  --font-family-body: "Roboto", sans-serif;   
  
  --font-lg: 18px;
  --font-md: 16px;
  --font-sm: 14px;

  --font-w-regular: 400;
  --font-w-medium: 500;
  --font-w-semibold: 600;
  --font-w-bold: 700;
  --font-w-extrabold: 800;
  --font-w-black: 900;
  

  /* ================================================================
    STATUS — SEMANTIC
  ================================================================ */
  --status-warning: #ffd333;
  --status-warning-dark: #d35400;
  --status-success: #439e4a;
  --status-success-bright: #44bd32;
  --status-info: #17a2b8;
  --status-light-info: #b8e2e5;
  --status-danger: #eb3e32;
  --status-danger-red: #ff0000;
  --status-info-light: #8cc4f93b;
  --status-primary: #1a66ff;
  --status-primary-dark: #2a4176;

  /* ================================================================
    SOCIAL
  ================================================================ */
  --color-social-facebook: #3c5a99;
  --color-social-twitter: #00a2e8;
  --color-social-youtube: #e52e2e;
  --color-social-instagram: #815dc7;
  --color-social-rss: #ffc338;

  /* ================================================================
    CHECKOUT (COMPONENT SCOPE — AYRI TUTTUM)
  ================================================================ */
  --checkout-border-light-color: #bbb;
  --checkout-bg-color: #F5F5F5;
  --checkout-bg-color-2: #c9c9c9;
  --checkout-bg:#f4f6fa;
  --checkout-link-color:#1e3a8a;
  /* ================================================================
    HEADER
  ================================================================ */
  --header-bg: #fff;

  /* ================================================================
    FOOTER
  ================================================================ */
  --footer-divider-color: #0000003c;
  --footer-bg: #FBFBFB;

  /* ================================================================
    MENU
  ================================================================ */
  --menu-bg: #fff;
  --menu-item-text: #26292d;
  --menu-item-hover-text: #26292d;
  --menu-border: #d7d7d7;
  --menu-mobil-sub-bg:#f5f5f5;
  --menu-offcanvas-bg: rgba(0, 0, 0, 0.5);

    /* ================================================================
    CAROUSEL ARROW ICONS
  ================================================================ */
  --arrow-icon-bg: #e5e5e5;
  --arrow-icon-hover-bg: #e5e5e5;
  --arrow-icon-text: #26292d;
  --arrow-icon-hover-text: #26292d;
  
    /* ================================================================
    PRODUCT ADD CART 
  ================================================================ */
  --product-add-cart-badge: #439e4a;
  --product-add-cart-badge-text: #fff;

    /* ================================================================
    SLIDER NAVIGATION COLORS
  ================================================================ */
  --slider-navigation-bg: #26292d;
  --slider-navigation-text: #fff;

  /* ================================================================
    ALERT MESSAGE COLORS
  ================================================================ */
  --alert-success-bg: #439e4a;
  --alert-success-icon: #fff;

  

}

/* Center-Center */
.flex-c {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Space-Between, Align Center */
.sb-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Align-Start, Justify-Center */
.flex-sc {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* Align-Start, Justify-Start */
.flex-ss {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

/* Align-Start, Justify-Space-Between */
.flex-sb {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* Align-End, Justify-Center */
.flex-ec {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Align-End, Justify-Start */
.flex-es {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

/* Align-End, Justify-Space-Between */
.flex-eb {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

/* Align-Center, Justify-Start */
.flex-cs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Align-Center, Justify-Space-Around */
.flex-ca {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

/* Align-Center, Justify-Space-Evenly */
.flex-ce {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.flex-ce-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
/* Full Width */
.w-full {
  width: 100% !important;
}

/* No Visibility */
.none-visible {
  visibility: hidden;
}