:root {
  /* Colors */

  /* default */
  --primary: var(--jal);
  --secondary: var(--stone);
  --success: var(--neem);
  --alert: var(--mirch);
  --warning: var(--haldi);
  --accent1: var(--tawak);
  --accent2: var(--jamun);
  --accent3: var(--neel);
  --accent4: var(--nimbu);
  --accent5: var(--color-cyan-1000);
  --accent6: var(--color-magenta-1000);
  --accent7: var(--color-sea-1000);
  --accent8: var(--color-pink-1000);
  --inverse: var(--night);

  /* dark */
  --primary-dark: var(--jal-dark);
  --secondary-dark: var(--stone-dark);
  --success-dark: var(--neem-dark);
  --alert-dark: var(--mirch-dark);
  --warning-dark: var(--haldi-dark);
  --accent1-dark: var(--tawak-dark);
  --accent2-dark: var(--jamun-dark);
  --accent3-dark: var(--neel-dark);
  --accent4-dark: var(--nimbu-dark);
  --accent5-dark: var(--color-cyan-1200);
  --accent6-dark: var(--color-magenta-1200);
  --accent7-dark: var(--color-sea-1200);
  --accent8-dark: var(--color-pink-1200);

  /* darker */
  --primary-darker: var(--jal-darker);
  --success-darker: var(--neem-darker);
  --alert-darker: var(--mirch-darker);
  --warning-darker: var(--haldi-darker);
  --accent1-darker: var(--tawak-darker);
  --accent2-darker: var(--jamun-darker);
  --accent3-darker: var(--neel-darker);
  --accent4-darker: var(--nimbu-darker);
  --accent5-darker: var(--color-cyan-1300);
  --accent6-darker: var(--color-magenta-1300);
  --accent7-darker: var(--color-sea-1300);
  --accent8-darker: var(--color-pink-1300);

  /* light */
  --primary-light: var(--jal-light);
  --secondary-light: var(--stone-light);
  --success-light: var(--neem-light);
  --alert-light: var(--mirch-light);
  --warning-light: var(--haldi-light);
  --accent1-light: var(--tawak-light);
  --accent2-light: var(--jamun-light);
  --accent3-light: var(--neel-light);
  --accent4-light: var(--nimbu-light);
  --accent5-light: var(--color-cyan-700);
  --accent6-light: var(--color-magenta-700);
  --accent7-light: var(--color-sea-700);
  --accent8-light: var(--color-pink-700);
  --inverse-light: var(--night-light);

  /* lighter */
  --primary-lighter: var(--jal-lighter);
  --secondary-lighter: var(--stone-lighter);
  --success-lighter: var(--neem-lighter);
  --alert-lighter: var(--mirch-lighter);
  --warning-lighter: var(--haldi-lighter);
  --accent1-lighter: var(--tawak-lighter);
  --accent2-lighter: var(--jamun-lighter);
  --accent3-lighter: var(--neel-lighter);
  --accent4-lighter: var(--nimbu-lighter);
  --accent5-lighter: var(--color-cyan-500);
  --accent6-lighter: var(--color-magenta-500);
  --accent7-lighter: var(--color-sea-500);
  --accent8-lighter: var(--color-pink-500);
  --inverse-lighter: var(--night-lighter);

  /* lightest */
  --primary-lightest: var(--jal-lightest);
  --secondary-lightest: var(--stone-lightest);
  --success-lightest: var(--neem-lightest);
  --alert-lightest: var(--mirch-lightest);
  --warning-lightest: var(--haldi-lightest);
  --accent1-lightest: var(--tawak-lightest);
  --accent2-lightest: var(--jamun-lightest);
  --accent3-lightest: var(--neel-lightest);
  --accent4-lightest: var(--nimbu-lightest);
  --accent5-lightest: var(--color-cyan-200);
  --accent6-lightest: var(--color-magenta-200);
  --accent7-lightest: var(--color-sea-200);
  --accent8-lightest: var(--color-pink-200);
  --inverse-lightest: var(--night-lightest);

  /* Focus */
  --primary-focus: var(--primary-dark);
  --inverse-focus: var(--night);

  /* Ultra Light */
  --primary-ultra-light: var(--color-blue-100);
  --success-ultra-light: var(--color-green-100);
  --alert-ultra-light: var(--color-red-100);
  --warning-ultra-light: var(--color-yellow-100);
  --accent1-ultra-light: var(--color-orange-100);
  --accent2-ultra-light: var(--color-violet-100);
  --accent3-ultra-light: var(--color-indigo-100);
  --accent4-ultra-light: var(--color-lime-100);
  --accent5-ultra-light: var(--color-cyan-100);
  --accent6-ultra-light: var(--color-magenta-100);
  --accent7-ultra-light: var(--color-sea-100);
  --accent8-ultra-light: var(--color-pink-100);

  /* Numeric semantic steps */
  --primary-300: var(--color-blue-300);
  --primary-400: var(--color-blue-400);
  --primary-600: var(--color-blue-600);
  --primary-800: var(--color-blue-800);
  --primary-900: var(--color-blue-900);
  --primary-1100: var(--color-blue-1100);
  --primary-1400: var(--color-blue-1400);
  --success-300: var(--color-green-300);
  --success-400: var(--color-green-400);
  --success-600: var(--color-green-600);
  --success-800: var(--color-green-800);
  --success-900: var(--color-green-900);
  --success-1100: var(--color-green-1100);
  --success-1400: var(--color-green-1400);
  --alert-300: var(--color-red-300);
  --alert-400: var(--color-red-400);
  --alert-600: var(--color-red-600);
  --alert-800: var(--color-red-800);
  --alert-900: var(--color-red-900);
  --alert-1100: var(--color-red-1100);
  --alert-1400: var(--color-red-1400);
  --warning-300: var(--color-yellow-300);
  --warning-400: var(--color-yellow-400);
  --warning-600: var(--color-yellow-600);
  --warning-800: var(--color-yellow-800);
  --warning-1000: var(--color-yellow-1000);
  --warning-1200: var(--color-yellow-1200);
  --warning-1400: var(--color-yellow-1400);
  --accent1-300: var(--color-orange-300);
  --accent1-400: var(--color-orange-400);
  --accent1-600: var(--color-orange-600);
  --accent1-800: var(--color-orange-800);
  --accent1-900: var(--color-orange-900);
  --accent1-1100: var(--color-orange-1100);
  --accent1-1400: var(--color-orange-1400);
  --accent2-300: var(--color-violet-300);
  --accent2-400: var(--color-violet-400);
  --accent2-600: var(--color-violet-600);
  --accent2-800: var(--color-violet-800);
  --accent2-900: var(--color-violet-900);
  --accent2-1100: var(--color-violet-1100);
  --accent2-1400: var(--color-violet-1400);
  --accent3-300: var(--color-indigo-300);
  --accent3-400: var(--color-indigo-400);
  --accent3-600: var(--color-indigo-600);
  --accent3-800: var(--color-indigo-800);
  --accent3-900: var(--color-indigo-900);
  --accent3-1100: var(--color-indigo-1100);
  --accent3-1400: var(--color-indigo-1400);
  --accent4-300: var(--color-lime-300);
  --accent4-400: var(--color-lime-400);
  --accent4-600: var(--color-lime-600);
  --accent4-800: var(--color-lime-800);
  --accent4-900: var(--color-lime-900);
  --accent4-1100: var(--color-lime-1100);
  --accent4-1400: var(--color-lime-1400);
  --accent5-300: var(--color-cyan-300);
  --accent5-400: var(--color-cyan-400);
  --accent5-600: var(--color-cyan-600);
  --accent5-800: var(--color-cyan-800);
  --accent5-900: var(--color-cyan-900);
  --accent5-1100: var(--color-cyan-1100);
  --accent5-1400: var(--color-cyan-1400);
  --accent6-300: var(--color-magenta-300);
  --accent6-400: var(--color-magenta-400);
  --accent6-600: var(--color-magenta-600);
  --accent6-800: var(--color-magenta-800);
  --accent6-900: var(--color-magenta-900);
  --accent6-1100: var(--color-magenta-1100);
  --accent6-1400: var(--color-magenta-1400);
  --accent7-300: var(--color-sea-300);
  --accent7-400: var(--color-sea-400);
  --accent7-600: var(--color-sea-600);
  --accent7-800: var(--color-sea-800);
  --accent7-900: var(--color-sea-900);
  --accent7-1100: var(--color-sea-1100);
  --accent7-1400: var(--color-sea-1400);
  --accent8-300: var(--color-pink-300);
  --accent8-400: var(--color-pink-400);
  --accent8-600: var(--color-pink-600);
  --accent8-800: var(--color-pink-800);
  --accent8-900: var(--color-pink-900);
  --accent8-1100: var(--color-pink-1100);
  --accent8-1400: var(--color-pink-1400);

  /* Neutral semantic steps */
  --secondary-600: var(--color-gray-600);
  --inverse-800: var(--color-gray-800);
  --inverse-1000: var(--color-gray-1000);
  --inverse-1200: var(--color-gray-1200);
  --inverse-1300: var(--color-gray-1300);

  /* shadow */
  --primary-shadow: color-mod(var(--primary) a(var(--opacity-4)));
  --secondary-shadow: color-mod(var(--secondary) a(var(--opacity-4)));
  --success-shadow: color-mod(var(--success) a(var(--opacity-4)));
  --alert-shadow: color-mod(var(--alert) a(var(--opacity-4)));
  --warning-shadow: color-mod(var(--warning) a(var(--opacity-4)));
  --accent1-shadow: color-mod(var(--accent1) a(var(--opacity-4)));
  --accent2-shadow: color-mod(var(--accent2) a(var(--opacity-4)));
  --accent3-shadow: color-mod(var(--accent3) a(var(--opacity-4)));
  --accent4-shadow: color-mod(var(--accent4) a(var(--opacity-4)));
  --accent5-shadow: color-mod(var(--accent5) a(var(--opacity-4)));
  --accent6-shadow: color-mod(var(--accent6) a(var(--opacity-4)));
  --accent7-shadow: color-mod(var(--accent7) a(var(--opacity-4)));
  --accent8-shadow: color-mod(var(--accent8) a(var(--opacity-4)));
  --inverse-shadow: color-mod(var(--inverse) a(var(--opacity-4)));

  /* Text colors */
  --text: var(--night);
  --text-subtle: var(--night-lighter);
  --text-link: var(--primary);
  --text-disabled: var(--inverse-lightest);
  --text-destructive: var(--alert);
  --text-white: var(--white);
  --text-success: var(--success);

  /* spacing - DEPRECATED */
  --spacing-xs: 1px;
  --spacing-s: 2px;
  --spacing-m: 4px;
  --spacing-0-75: 6px;
  --spacing: 8px;
  --spacing-l: 12px;
  /* 8 * 2 */
  --spacing-2: 16px;
  /* 8 * 3 */
  --spacing-xl: 24px;
  /* 8 * 4 */
  --spacing-3: 32px;
  /* 8 * 6 */
  --spacing-4: 48px;
  /* 8 * 8 */
  --spacing-5: 64px;
  /* 8 * 12 */
  --spacing-6: 96px;
  /* 8 * 16 */
  --spacing-7: 128px;
  /* 8 * 22 */
  --spacing-8: 176px;
  /* 8 * 32 */
  --spacing-9: 256px;

  /* Fonts */
  --font-family: 'Nunito Sans';

  /* Font size */
  --font-size-xxs: 4px;
  --font-size-xs: 8px;
  --font-size-s: 12px;
  --font-size: 14px;
  --font-size-m: 16px;
  --font-size-l: 20px;
  --font-size-xl: 28px;
  --font-size-xxl: 32px;
  --font-size-xxxl: 40px;

  /* Font weight  */
  --font-weight-normal: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
  --font-weight-bolder: 800;

  /* Line height or Font height  */
  --font-height-normal: normal;
  --font-height-s: 16px;
  --font-height: 20px;
  --font-height-m: 24px;
  --font-height-l: 32px;
  --font-height-xl: 40px;
  --font-height-xxl: 48px;

  /* Letter spacing */
  --letter-spacing: 0.5px;

  /* body settings */

  /* border */
  --border: var(--border-width-2-5) solid var(--secondary);
  --border-s: var(--border-width-05) solid var(--secondary);

  /* padding */

  /* shadow */
  --shadow-s: 0 1px 4px 0 rgba(0, 0, 0, 0.16);
  --shadow-m: 0 2px 8px 0 rgba(0, 0, 0, 0.16);
  --shadow-l: 0 4px 16px 0 rgba(0, 0, 0, 0.16);
  --shadow-spread: 0 0 0 3px;

  /* 
  Grid breakpoints
  Define the minimum dimensions at which your layout will change,
  adapting to different screen sizes, for use in media queries. 
  */

  --grid-s-breakpoint: 576px;
  --grid-m-breakpoint: 768px;
  --grid-l-breakpoint: 992px;
  --grid-xl-breakpoint: 1200px;

  /* 
  Grid columns
  Set the number of columns and specify the width of the gutters. 
  */

  --grid-columns: 12;

  /* Undefined colors */
  --card-subdued-bg: #fcfafa;

  /* Transparancy (Opacity) */
  --transparent-58: 0.58;

  /* Transition curve timing function */
  /* Use standard-easing when an element is visible from the beginning to the end of a motion. Ex-Expanding cards. */
  --standard-productive-curve: cubic-bezier(0.2, 0, 0.38, 0.9);
  --standard-expressive-curve: cubic-bezier(0.4, 0.14, 0.3, 1);
  /* Use entrance-easing when an element quickly appears and slows down to a stop. Ex-when adding elements to the view, such as a modal appearing. */
  --entrance-productive-curve: cubic-bezier(0, 0, 0.38, 0.9);
  --entrance-expressive-curve: cubic-bezier(0, 0, 0.3, 1);
  /* Use exit-easing when removing elements from view, such as closing a modal or toaster. */
  --exit-productive-curve: cubic-bezier(0.2, 0, 1, 0.9);
  --exit-expressive-curve: cubic-bezier(0.4, 0.14, 1, 1);

  /* Transition duration */
  --duration--fast-01: 80ms;
  --duration--fast-02: 120ms;
  --duration--moderate-01: 160ms;
  --duration--moderate-02: 240ms;
  --duration--slow-01: 400ms;
  --duration--slow-02: 720ms;

  /* Opacity */
  --opacity-1: 0.04;
  --opacity-2: 0.08;
  --opacity-3: 0.12;
  --opacity-4: 0.16;
  --opacity-6: 0.24;
  --opacity-8: 0.32;
  --opacity-10: 0.4;
  --opacity-12: 0.48;
  --opacity-16: 0.64;
  --opacity-20: 0.8;

  /* Spacing (value / 4) * 10 */
  --spacing-2-5: 1px;
  --spacing-05: 2px;
  --spacing-10: 4px;
  --spacing-15: 6px;
  --spacing-20: 8px;
  --spacing-30: 12px;
  --spacing-40: 16px;
  --spacing-60: 24px;
  --spacing-80: 32px;
  --spacing-120: 48px;
  --spacing-160: 64px;
  --spacing-240: 96px;
  --spacing-320: 128px;
  --spacing-440: 176px;
  --spacing-640: 256px;

  /* Border Radius */
  --border-radius-2-5: 1px;
  --border-radius-05: 2px;
  --border-radius-10: 4px;
  --border-radius-15: 6px;
  --border-radius-20: 8px;
  --border-radius-30: 12px;
  --border-radius-40: 16px;
  --border-radius-full: 9999px;

  /* Border Width */
  --border-width-2-5: 1px;
  --border-width-05: 2px;
  --border-width-7-5: 3px;
  --border-width-10: 4px;
}