:root {
  /* Base Colors */
  --white: #fff;
  --fade-white: #f5f5f5;
  --light-white : #dfdfdf;
  --dull-white:#ffffffb3;
  --black: #000;
  --blackish: #333;
  --fixed-black: #000;
  --transparent: rgba(0, 0, 0, 0);
  --red-text: #ff1100;
  --deep-red:#750202;
  --purple-text: #9c27b0;
  --purple-bright:#8507e5;
  --purple-light:#9880ff;
  --indigo-text: #3f51b5;
  --blue-text: #2196f3;
  --deep-blue: #428bff;
  --bright-blue:#06f;
  --green: #0a790d;
  --deep-green: #26a69a;
  --yellow-text: #ffeb3b;
  --yellow-accent-3: #ffea00;
  --yellow-bright: #ff0;
  --orange: #ff9800;
  --saffron : #f50;
  --grey-bg: #e2f5dc;
  --fixed-white : #fff;
  --fixed-saffron : #f50;
  --fixed-dark : #000;
  --fixed-navy :#070d3c;
  --grey-text: #9e9e9e;
  --light-grey: #929daf;;
  --link-color: #039be5;
  --olive:#c5d92d;
  --bodybgcolor: var(--white);

  --shadow-05: rgba(0, 0, 0, 0.05);
  --shadow-10: rgba(0, 0, 0, 0.10);
  --shadow-14: rgba(0, 0, 0, 0.14);
  --shadow-12: rgba(0, 0, 0, 0.12);
  --shadow-20: rgba(0, 0, 0, 0.2);
  --shadow-30: rgba(0, 0, 0, 0.3);
  --shadow-19: rgba(0, 0, 0, 0.19);
  --shadow-42: rgba(0, 0, 0, 0.42);
  --shadow-55: rgba(0, 0, 0, 0.55);
  --shadow-75: rgba(0, 0, 0, 0.75);


  --bodyTextColor: var(--black); 
  --a-color-hover: var(--saffron);
  --mark-bg: var(--yellow-bright);

  /* Semantic Aliases */
  --footer-text: var(--white);
  --pagination-active-link: var(--white);
  --breadcrumb-last: var(--white);
  --badge-new-color: var(--white);
  --nav-link: var(--white);

  /* UI Colors */
  --divider-color: var(--badge-color);
  --blockquote-border: var(--amber-text);
  --pagination-link: var(--blackish);
  --pagination-active-bg: var(--amber-text);
  --pagination-disabled-link: var(--badge-color);
  --breadcrumb-color: var(--dull-white);
  --footer-bg: var(--amber-text);
  --footer-copyright-text: var(--modal-bg);
  --footer-copyright-bg: var(--shadow-75);
  --table-striped-bg: rgba(242, 242, 242, 0.5);
  --table-hover-bg: rgba(242, 242, 242, 0.5);
  --table-border: var(--shadow-12);
  --progress-bg: #acece6;
  --progress-bar: var(--deep-green);
  --badge-color: #757575;
  --badge-new-bg: var(--progress-bar);
  --nav-active-bg: var(--shadow-10);
  --nav-hover-color: var(--saffron);
  --nav-icon-color: var(--dull-white);

  /* Custom Additions */
  --amber-text: #ffab40;
  --amber-hover: #ffd8a6;
  --toast-bg: #323232;
  --toast-action: #eeff41;
  --tab-focus-bg: rgba(246, 178, 181, 0.2);
  --tab-disabled: rgba(238, 110, 115, 0.4);
  --tab-color: rgba(238, 110, 115, 0.7);
  --tab-indicator: #f6b2b5;
  --btn-disabled-bg: #dfdfdf;
  --btn-disabled-text: #9f9f9f;
  --btn-focus-bg: #02221f;
  --btn-hover-bg: #033a34;
  --btn-flat-text: #343434;
  --btn-flat-disabled: #b3b2b2;
  --dropdown-hover-bg: #eee;
  --dropdown-focus-bg: #dadada;
  --waves-light-bg: rgba(255, 255, 255, 0.45);
  --waves-teal-bg: rgba(0, 150, 136, 0.7);
  --modal-bg: #fafafa;
  --modal-border: var(--nav-active-bg);
  --collapsible-border: #ddd;
  --chip-bg: #e4e4e4;
  --overlay-bg: #292929;
  --placeholder-color: var(--collapsible-border);
  --focus-outline: #c9f3ef;
  --btn-focus-alt: #2ab7a9;


  /* Shadow Color Tokens */
  --shadow-depth-1: 0 2px 2px 0 var(--shadow-14), 0 3px 1px -2px var(--shadow-12), 0 1px 5px 0 var(--shadow-20);
  --shadow-depth-1-half: 0 3px 3px 0 var(--shadow-14), 0 1px 7px 0 var(--shadow-12), 0 3px 1px -1px var(--shadow-20);
  --shadow-depth-2: 0 4px 5px 0 var(--shadow-14), 0 1px 10px 0 var(--shadow-12), 0 2px 4px -1px var(--shadow-30);
  --shadow-depth-3: 0 8px 17px 2px var(--shadow-14), 0 3px 14px 2px var(--shadow-12), 0 5px 5px -3px var(--shadow-20);
  --shadow-depth-4: 0 16px 24px 2px var(--shadow-14), 0 6px 30px 5px var(--shadow-12), 0 8px 10px -7px var(--shadow-20);
  --shadow-depth-5: 0 24px 38px 3px var(--shadow-14), 0 9px 46px 8px var(--shadow-12), 0 11px 15px -7px var(--shadow-20);
  --shadow-hoverable: 0 8px 17px 0 var(--shadow-20), 0 6px 20px 0 var(--shadow-19);
  
  --hero-bg: url('https://artporta.com/app_asset/image/bg-circle.png'), url('https://artporta.com/app_asset/image/bg-triangle.png'),url('https://artporta.com/app_asset/image/bg-bottom-light.png'), linear-gradient(to bottom right, #90e740d6, #0a17b9cf);
}


/* Utility */
.nopadding {
  --nopadding: 0;
}