@import "tailwindcss";
@import "tw-animate-css";

@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/frappe/css/fonts/inter/InterVariable.woff2") format("woff2");
}

@font-face {
  font-family: InterVariable;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/frappe/css/fonts/inter/InterVariable-Italic.woff2") format("woff2");
}

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-*: initial;

  /** ----- Espresso Design System ----- **/
  --font-sans: "InterVariable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-sans--font-optical-sizing: auto;
  --font-sans--font-variation-settings: "opsz" 24;
  --font-numeric: "InterVariable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-numeric--font-feature-settings: "calt", "cv01", "cv03", "cv04", "cv09", "cv11", "zero";
  --font-numeric--font-optical-sizing: auto;
  --font-numeric--font-variation-settings: "opsz" 24;


  /** Font Sizes - Web **/
  --text-2xs: 0.6875rem;
  --text-2xs--line-height: 1.15;
  --text-2xs--letter-spacing: 0.01em;
  --text-2xs--font-weight: 420;

  --text-xs: 0.75rem;
  --text-xs--line-height: 1.15;
  --text-xs--letter-spacing: 0.02em;
  --text-xs--font-weight: 420;

  --text-sm: 0.8125rem;
  --text-sm--line-height: 1.15;
  --text-sm--letter-spacing: 0.02em;
  --text-sm--font-weight: 420;

  --text-base: 0.875rem;
  --text-base--line-height: 1.15;
  --text-base--letter-spacing: 0.02em;
  --text-base--font-weight: 420;

  --text-lg: 1rem;
  --text-lg--line-height: 1.15;
  --text-lg--letter-spacing: 0.01em;
  --text-lg--font-weight: 400;

  --text-xl: 1.125rem;
  --text-xl--line-height: 1.15;
  --text-xl--letter-spacing: 0.01em;
  --text-xl--font-weight: 400;

  --text-2xl: 1.25rem;
  --text-2xl--line-height: 1.15;
  --text-2xl--letter-spacing: 0.01em;
  --text-2xl--font-weight: 400;

  --text-3xl: 1.5rem;
  --text-3xl--line-height: 1.15;
  --text-3xl--letter-spacing: 0.005em;
  --text-3xl--font-weight: 400;

  /* Paragraph font sizes */
  --text-p-2xs: 0.6875rem;
  --text-p-2xs--line-height: 1.6;
  --text-p-2xs--letter-spacing: 0.01em;
  --text-p-2xs--font-weight: 420;

  --text-p-xs: 0.75rem;
  --text-p-xs--line-height: 1.6;
  --text-p-xs--letter-spacing: 0.02em;
  --text-p-xs--font-weight: 420;

  --text-p-sm: 0.8125rem;
  --text-p-sm--line-height: 1.5;
  --text-p-sm--letter-spacing: 0.02em;
  --text-p-sm--font-weight: 420;

  --text-p-base: 0.875rem;
  --text-p-base--line-height: 1.5;
  --text-p-base--letter-spacing: 0.02em;
  --text-p-base--font-weight: 420;

  --text-p-lg: 1rem;
  --text-p-lg--line-height: 1.5;
  --text-p-lg--letter-spacing: 0.02em;
  --text-p-lg--font-weight: 400;

  --text-p-xl: 1.125rem;
  --text-p-xl--line-height: 1.42;
  --text-p-xl--letter-spacing: 0.01em;
  --text-p-xl--font-weight: 400;

  --text-p-2xl: 1.25rem;
  --text-p-2xl--line-height: 1.38;
  --text-p-2xl--letter-spacing: 0.01em;
  --text-p-2xl--font-weight: 400;

  --text-p-3xl: 1.5rem;
  --text-p-3xl--line-height: 1.2;
  --text-p-3xl--letter-spacing: 0.005em;
  --text-p-3xl--font-weight: 400;

  /** Border Radius **/
  --radius: 0.5rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;

  /** Shadow **/
  --shadow-sm: var(--elevation-sm);
  --shadow: var(--elevation-base);
  --shadow-md: var(--elevation-md);
  --shadow-lg: var(--elevation-lg);
  --shadow-xl: var(--elevation-xl);
  --shadow-2xl: var(--elevation-2xl);

  --shadow-switch: 0px 3px 3px 0px rgba(0, 0, 0, 0.05);
  --shadow-checkbox-hover: 0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 3px 0px rgba(0, 0, 0, 0.1);

  --shadow-textarea-active: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);

  /** Spacing **/
  --spacing-4.5: 1.125rem;
  --spacing-5.5: 1.375rem;
  --spacing-6.5: 1.625rem;
  --spacing-7.5: 1.875rem;
  --spacing-8.5: 2.125rem;
  --spacing-9.5: 2.375rem;
  --spacing-10.5: 2.625rem;
  --spacing-11.5: 2.875rem;
  --spacing-12.5: 3.125rem;
  --spacing-13: 3.25rem;
  --spacing-13.5: 3.375rem;
  --spacing-14.5: 3.625rem;
  --spacing-15: 3.75rem;
  --spacing-15.5: 3.875rem;

  /** Colors **/

  --color-white: var(--white);
  --color-black: var(--black);


  --color-gray-50: var(--gray-50);
  --color-gray-100: var(--gray-100);
  --color-gray-200: var(--gray-200);
  --color-gray-300: var(--gray-300);
  --color-gray-400: var(--gray-400);
  --color-gray-450: var(--gray-450);
  --color-gray-500: var(--gray-500);
  --color-gray-600: var(--gray-600);
  --color-gray-700: var(--gray-700);
  --color-gray-800: var(--gray-800);
  --color-gray-900: var(--gray-900);
  --color-gray-950: var(--gray-950);


  --color-red-50: var(--red-50);
  --color-red-100: var(--red-100);
  --color-red-200: var(--red-200);
  --color-red-300: var(--red-300);
  --color-red-400: var(--red-400);
  --color-red-500: var(--red-500);
  --color-red-600: var(--red-600);
  --color-red-700: var(--red-700);
  --color-red-800: var(--red-800);
  --color-red-900: var(--red-900);
  --color-red-950: var(--red-950);

  --color-blue-50: var(--blue-50);
  --color-blue-100: var(--blue-100);
  --color-blue-200: var(--blue-200);
  --color-blue-300: var(--blue-300);
  --color-blue-400: var(--blue-400);
  --color-blue-500: var(--blue-500);
  --color-blue-600: var(--blue-600);
  --color-blue-700: var(--blue-700);
  --color-blue-800: var(--blue-800);
  --color-blue-900: var(--blue-900);
  --color-blue-950: var(--blue-950);

  --color-green-50: var(--green-50);
  --color-green-100: var(--green-100);
  --color-green-200: var(--green-200);
  --color-green-300: var(--green-300);
  --color-green-400: var(--green-400);
  --color-green-500: var(--green-500);
  --color-green-600: var(--green-600);
  --color-green-700: var(--green-700);
  --color-green-800: var(--green-800);
  --color-green-900: var(--green-900);
  --color-green-950: var(--green-950);

  --color-amber-50: var(--amber-50);
  --color-amber-100: var(--amber-100);
  --color-amber-200: var(--amber-200);
  --color-amber-300: var(--amber-300);
  --color-amber-400: var(--amber-400);
  --color-amber-500: var(--amber-500);
  --color-amber-600: var(--amber-600);
  --color-amber-700: var(--amber-700);
  --color-amber-800: var(--amber-800);
  --color-amber-900: var(--amber-900);
  --color-amber-950: var(--amber-950);

  --color-orange-50: var(--orange-50);
  --color-orange-100: var(--orange-100);
  --color-orange-200: var(--orange-200);
  --color-orange-300: var(--orange-300);
  --color-orange-400: var(--orange-400);
  --color-orange-500: var(--orange-500);
  --color-orange-600: var(--orange-600);
  --color-orange-700: var(--orange-700);
  --color-orange-800: var(--orange-800);
  --color-orange-900: var(--orange-900);
  --color-orange-950: var(--orange-950);

  --color-yellow-50: var(--yellow-50);
  --color-yellow-100: var(--yellow-100);
  --color-yellow-200: var(--yellow-200);
  --color-yellow-300: var(--yellow-300);
  --color-yellow-400: var(--yellow-400);
  --color-yellow-500: var(--yellow-500);
  --color-yellow-600: var(--yellow-600);
  --color-yellow-700: var(--yellow-700);
  --color-yellow-800: var(--yellow-800);
  --color-yellow-900: var(--yellow-900);
  --color-yellow-950: var(--yellow-950);

  --color-teal-50: var(--teal-50);
  --color-teal-100: var(--teal-100);
  --color-teal-200: var(--teal-200);
  --color-teal-300: var(--teal-300);
  --color-teal-400: var(--teal-400);
  --color-teal-500: var(--teal-500);
  --color-teal-600: var(--teal-600);
  --color-teal-700: var(--teal-700);
  --color-teal-800: var(--teal-800);
  --color-teal-900: var(--teal-900);
  --color-teal-950: var(--teal-950);

  --color-cyan-50: var(--cyan-50);
  --color-cyan-100: var(--cyan-100);
  --color-cyan-200: var(--cyan-200);
  --color-cyan-300: var(--cyan-300);
  --color-cyan-400: var(--cyan-400);
  --color-cyan-500: var(--cyan-500);
  --color-cyan-600: var(--cyan-600);
  --color-cyan-700: var(--cyan-700);
  --color-cyan-800: var(--cyan-800);
  --color-cyan-900: var(--cyan-900);
  --color-cyan-950: var(--cyan-950);

  --color-purple-50: var(--purple-50);
  --color-purple-100: var(--purple-100);
  --color-purple-200: var(--purple-200);
  --color-purple-300: var(--purple-300);
  --color-purple-400: var(--purple-400);
  --color-purple-500: var(--purple-500);
  --color-purple-600: var(--purple-600);
  --color-purple-700: var(--purple-700);
  --color-purple-800: var(--purple-800);
  --color-purple-900: var(--purple-900);
  --color-purple-950: var(--purple-950);

  --color-pink-50: var(--pink-50);
  --color-pink-100: var(--pink-100);
  --color-pink-200: var(--pink-200);
  --color-pink-300: var(--pink-300);
  --color-pink-400: var(--pink-400);
  --color-pink-500: var(--pink-500);
  --color-pink-600: var(--pink-600);
  --color-pink-700: var(--pink-700);
  --color-pink-800: var(--pink-800);
  --color-pink-900: var(--pink-900);
  --color-pink-950: var(--pink-950);

  --color-violet-50: var(--violet-50);
  --color-violet-100: var(--violet-100);
  --color-violet-200: var(--violet-200);
  --color-violet-300: var(--violet-300);
  --color-violet-400: var(--violet-400);
  --color-violet-500: var(--violet-500);
  --color-violet-600: var(--violet-600);
  --color-violet-700: var(--violet-700);
  --color-violet-800: var(--violet-800);
  --color-violet-900: var(--violet-900);
  --color-violet-950: var(--violet-950);

  /** Overlay colors **/
  --color-white-50: var(--white-50);
  --color-white-100: var(--white-100);
  --color-white-200: var(--white-200);
  --color-white-300: var(--white-300);
  --color-white-400: var(--white-400);
  --color-white-500: var(--white-500);
  --color-white-600: var(--white-600);
  --color-white-700: var(--white-700);
  --color-white-800: var(--white-800);
  --color-white-900: var(--white-900);

  --color-black-50: var(--black-50);
  --color-black-100: var(--black-100);
  --color-black-200: var(--black-200);
  --color-black-300: var(--black-300);
  --color-black-400: var(--black-400);
  --color-black-500: var(--black-500);
  --color-black-600: var(--black-600);
  --color-black-700: var(--black-700);
  --color-black-800: var(--black-800);
  --color-black-900: var(--black-900);

  /** Ink Colors - used for text **/
  --color-ink-white: var(--ink-white);

  --color-ink-gray-1: var(--ink-gray-1);
  --color-ink-gray-2: var(--ink-gray-2);
  --color-ink-gray-3: var(--ink-gray-3);
  --color-ink-gray-4: var(--ink-gray-4);
  --color-ink-gray-5: var(--ink-gray-5);
  --color-ink-gray-6: var(--ink-gray-6);
  --color-ink-gray-7: var(--ink-gray-7);
  --color-ink-gray-8: var(--ink-gray-8);

  --color-ink-red-1: var(--ink-red-1);
  --color-ink-red-2: var(--ink-red-2);
  --color-ink-red-3: var(--ink-red-3);
  --color-ink-red-4: var(--ink-red-4);

  --color-ink-green-1: var(--ink-green-1);
  --color-ink-green-2: var(--ink-green-2);
  --color-ink-green-3: var(--ink-green-3);
  --color-ink-green-4: var(--ink-green-4);

  --color-ink-amber-1: var(--ink-amber-1);
  --color-ink-amber-2: var(--ink-amber-2);
  --color-ink-amber-3: var(--ink-amber-3);
  --color-ink-amber-4: var(--ink-amber-4);

  --color-ink-blue-1: var(--ink-blue-1);
  --color-ink-blue-2: var(--ink-blue-2);
  --color-ink-blue-3: var(--ink-blue-3);
  --color-ink-blue-4: var(--ink-blue-4);

  --color-ink-cyan-3: var(--ink-cyan-3);

  --color-ink-violet-1: var(--ink-violet-1);
  --color-ink-violet-2: var(--ink-violet-2);
  --color-ink-violet-3: var(--ink-violet-3);
  --color-ink-violet-4: var(--ink-violet-4);

  --color-ink-blue-link: var(--ink-blue-link);

  /** Surface Colors - used for backgrounds **/
  --color-surface-white: var(--surface-white);
  --color-surface-gray-1: var(--surface-gray-1);
  --color-surface-gray-2: var(--surface-gray-2);
  --color-surface-gray-3: var(--surface-gray-3);
  --color-surface-gray-4: var(--surface-gray-4);
  --color-surface-gray-5: var(--surface-gray-5);
  --color-surface-gray-6: var(--surface-gray-6);
  --color-surface-gray-7: var(--surface-gray-7);

  --color-surface-red-1: var(--surface-red-1);
  --color-surface-red-2: var(--surface-red-2);
  --color-surface-red-3: var(--surface-red-3);
  --color-surface-red-4: var(--surface-red-4);
  --color-surface-red-5: var(--surface-red-5);
  --color-surface-red-6: var(--surface-red-6);
  --color-surface-red-7: var(--surface-red-7);

  --color-surface-green-1: var(--surface-green-1);
  --color-surface-green-2: var(--surface-green-2);
  --color-surface-green-3: var(--surface-green-3);
  --color-surface-green-4: var(--surface-green-4);
  --color-surface-green-5: var(--surface-green-5);
  --color-surface-green-6: var(--surface-green-6);
  --color-surface-green-7: var(--surface-green-7);

  --color-surface-amber-1: var(--surface-amber-1);
  --color-surface-amber-2: var(--surface-amber-2);
  --color-surface-amber-3: var(--surface-amber-3);
  --color-surface-amber-4: var(--surface-amber-4);
  --color-surface-amber-5: var(--surface-amber-5);
  --color-surface-amber-6: var(--surface-amber-6);
  --color-surface-amber-7: var(--surface-amber-7);

  --color-surface-blue-1: var(--surface-blue-1);
  --color-surface-blue-2: var(--surface-blue-2);
  --color-surface-blue-3: var(--surface-blue-3);
  --color-surface-blue-4: var(--surface-blue-4);
  --color-surface-blue-5: var(--surface-blue-5);
  --color-surface-blue-6: var(--surface-blue-6);
  --color-surface-blue-7: var(--surface-blue-7);

  --color-surface-orange-2: var(--surface-orange-2);
  --color-surface-violet-2: var(--surface-violet-2);
  --color-surface-violet-3: var(--surface-violet-3);
  --color-surface-violet-4: var(--surface-violet-4);
  --color-surface-violet-5: var(--surface-violet-5);
  --color-surface-violet-6: var(--surface-violet-6);
  --color-surface-violet-7: var(--surface-violet-7);
  --color-surface-cyan-1: var(--surface-cyan-1);
  --color-surface-cyan-2: var(--surface-cyan-2);

  --color-surface-menu-bar: var(--surface-menu-bar);
  --color-surface-cards: var(--surface-cards);
  --color-surface-modal: var(--surface-modal);
  --color-surface-selected: var(--surface-selected);

  /** Outline Colors - used for borders/outlines **/
  --color-outline-white: var(--outline-white);
  --color-outline-gray-1: var(--outline-gray-1);
  --color-outline-gray-2: var(--outline-gray-2);
  --color-outline-gray-3: var(--outline-gray-3);
  --color-outline-gray-4: var(--outline-gray-4);
  --color-outline-gray-5: var(--outline-gray-5);

  --color-outline-red-2: var(--outline-red-2);
  --color-outline-red-3: var(--outline-red-3);
  --color-outline-red-4: var(--outline-red-4);

  --color-outline-green-2: var(--outline-green-2);
  --color-outline-green-3: var(--outline-green-3);
  --color-outline-green-4: var(--outline-green-4);

  --color-outline-amber-2: var(--outline-amber-2);
  --color-outline-amber-3: var(--outline-amber-3);
  --color-outline-amber-4: var(--outline-amber-4);

  --color-outline-blue-2: var(--outline-blue-2);
  --color-outline-blue-3: var(--outline-blue-3);
  --color-outline-blue-4: var(--outline-blue-4);

  --color-outline-orange-3: var(--outline-orange-3);
  --color-outline-violet-2: var(--outline-violet-2);
  --color-outline-violet-3: var(--outline-violet-3);
  --color-outline-violet-4: var(--outline-violet-4);

  --color-outline-gray-modals: var(--outline-gray-modals);

  /** Focus Shadows **/
  --shadow-focus-gray: var(--focus-shadow-gray);
  --shadow-focus-blue: var(--focus-shadow-blue);
  --shadow-focus-green: var(--focus-shadow-green);
  --shadow-focus-red: var(--focus-shadow-red);
  --shadow-focus-amber: var(--focus-shadow-amber);
}

:root {

  /** Espresso Design System Colors - TODO: Convert these to oklch colors later when Espresso supports it
  950 and 900 are the same in light mode
  **/
  --white: #FFFFFF;
  --black: #000000;

  --gray-50: #F8F8F8;
  --gray-100: #F3F3F3;
  --gray-200: #EDEDED;
  --gray-300: #E2E2E2;
  --gray-400: #C7C7C7;
  --gray-450: #C7C7C7;
  --gray-500: #999999;
  --gray-600: #7C7C7C;
  --gray-700: #525252;
  --gray-800: #383838;
  --gray-900: #171717;
  --gray-950: #171717;

  --blue-50: #F2F9FF;
  --blue-100: #E6F4FF;
  --blue-200: #C8E6FF;
  --blue-300: #A7D7FD;
  --blue-400: #73BBF6;
  --blue-500: #0289F7;
  --blue-600: #007BE0;
  --blue-700: #0070CC;
  --blue-800: #005CA3;
  --blue-900: #004880;
  --blue-950: #004880;

  --green-50: #F2FDF4;
  --green-100: #E4FAEB;
  --green-200: #C3F9D3;
  --green-300: #A6EFC0;
  --green-400: #86E0A8;
  --green-500: #46B37E;
  --green-600: #278F5E;
  --green-700: #137949;
  --green-800: #075E35;
  --green-900: #173B2C;
  --green-950: #173B2C;

  --red-50: #FFF7F7;
  --red-100: #FFE7E7;
  --red-200: #FFD8D8;
  --red-300: #FDC2C2;
  --red-400: #F79596;
  --red-500: #E03636;
  --red-600: #CC2929;
  --red-700: #B52A2A;
  --red-800: #941F1F;
  --red-900: #6B1515;
  --red-950: #6B1515;

  --amber-50: #FDFAED;
  --amber-100: #FFF7D3;
  --amber-200: #FEEDA9;
  --amber-300: #FBDB73;
  --amber-400: #FBCC55;
  --amber-500: #E79913;
  --amber-600: #DB7706;
  --amber-700: #B35309;
  --amber-800: #91400D;
  --amber-900: #763813;
  --amber-950: #763813;

  --orange-50: #FFF9F5;
  --orange-100: #FFEFE4;
  --orange-200: #FFDEC5;
  --orange-300: #FFCBA3;
  --orange-400: #F4B07F;
  --orange-500: #E86C13;
  --orange-600: #D45A08;
  --orange-700: #BD3E0C;
  --orange-800: #9E3513;
  --orange-900: #6B2711;
  --orange-950: #6B2711;

  --yellow-50: #FFFCEF;
  --yellow-100: #FFF7D3;
  --yellow-200: #F7E9A8;
  --yellow-300: #F5E171;
  --yellow-400: #F2D14B;
  --yellow-500: #EDBA13;
  --yellow-600: #D1930D;
  --yellow-700: #AB6E05;
  --yellow-800: #8C5600;
  --yellow-900: #733F12;
  --yellow-950: #733F12;

  --teal-50: #F0FDFA;
  --teal-100: #E6F7F4;
  --teal-200: #BAE8E1;
  --teal-300: #97DED4;
  --teal-400: #73D1C4;
  --teal-500: #36BAAD;
  --teal-600: #0B9E92;
  --teal-700: #0F736B;
  --teal-800: #115C57;
  --teal-900: #114541;
  --teal-950: #114541;

  --cyan-50: #F5FBFC;
  --cyan-100: #DDF7FF;
  --cyan-200: #B3E8F7;
  --cyan-300: #99E2F8;
  --cyan-400: #72D5F3;
  --cyan-500: #3BBDE5;
  --cyan-600: #32A4C7;
  --cyan-700: #267A94;
  --cyan-800: #125C73;
  --cyan-900: #164759;
  --cyan-950: #164759;

  --purple-50: #FDFAFF;
  --purple-100: #F6E9FF;
  --purple-200: #ECD3FF;
  --purple-300: #E2B9FC;
  --purple-400: #CFA1F2;
  --purple-500: #9C45E3;
  --purple-600: #8642C2;
  --purple-700: #6E399D;
  --purple-800: #5C2F83;
  --purple-900: #401863;
  --purple-950: #401863;

  --pink-50: #FFF7FC;
  --pink-100: #FDE8F5;
  --pink-200: #FFD5F0;
  --pink-300: #F9B9E0;
  --pink-400: #F6A7D6;
  --pink-500: #E34AA6;
  --pink-600: #CF3A96;
  --pink-700: #9C2671;
  --pink-800: #801458;
  --pink-900: #570F3E;
  --pink-950: #570F3E;

  --violet-50: #FBFAFF;
  --violet-100: #F0EBFF;
  --violet-200: #DBD5FF;
  --violet-300: #C9BAFB;
  --violet-400: #B3A1F5;
  --violet-500: #6846E3;
  --violet-600: #5F46C7;
  --violet-700: #4F3DA1;
  --violet-800: #392980;
  --violet-900: #251959;
  --violet-950: #251959;

  /** Overlay colors **/
  --white-50: rgba(255, 255, 255, 0.10);
  --white-100: rgba(255, 255, 255, 0.18);
  --white-200: rgba(255, 255, 255, 0.27);
  --white-300: rgba(255, 255, 255, 0.36);
  --white-400: rgba(255, 255, 255, 0.45);
  --white-500: rgba(255, 255, 255, 0.54);
  --white-600: rgba(255, 255, 255, 0.63);
  --white-700: rgba(255, 255, 255, 0.72);
  --white-800: rgba(255, 255, 255, 0.81);
  --white-900: rgba(255, 255, 255, 0.90);

  --black-50: rgba(0, 0, 0, 0.09);
  --black-100: rgba(0, 0, 0, 0.18);
  --black-200: rgba(0, 0, 0, 0.27);
  --black-300: rgba(0, 0, 0, 0.36);
  --black-400: rgba(0, 0, 0, 0.45);
  --black-500: rgba(0, 0, 0, 0.54);
  --black-600: rgba(0, 0, 0, 0.63);
  --black-700: rgba(0, 0, 0, 0.72);
  --black-800: rgba(0, 0, 0, 0.81);
  --black-900: rgba(0, 0, 0, 0.90);

  /** Ink Colors - used for text **/
  --ink-white: var(--white);
  --ink-gray-1: var(--gray-200);
  --ink-gray-2: var(--gray-300);
  --ink-gray-3: var(--gray-400);
  --ink-gray-4: var(--gray-500);
  --ink-gray-5: var(--gray-600);
  --ink-gray-6: var(--gray-700);
  --ink-gray-7: var(--gray-800);
  --ink-gray-8: var(--gray-900);

  --ink-red-1: var(--red-50);
  --ink-red-2: var(--red-400);
  --ink-red-3: var(--red-500);
  --ink-red-4: var(--red-700);

  --ink-green-1: var(--green-50);
  --ink-green-2: var(--green-400);
  --ink-green-3: var(--green-500);
  --ink-green-4: var(--green-700);

  --ink-amber-1: var(--amber-50);
  --ink-amber-2: var(--amber-400);
  --ink-amber-3: var(--amber-500);
  --ink-amber-4: var(--amber-700);

  --ink-blue-1: var(--blue-50);
  --ink-blue-2: var(--blue-400);
  --ink-blue-3: var(--blue-500);
  --ink-blue-4: var(--blue-700);

  --ink-cyan-3: var(--cyan-500);

  --ink-violet-1: var(--violet-50);
  --ink-violet-2: var(--violet-400);
  --ink-violet-3: var(--violet-500);
  --ink-violet-4: var(--violet-700);

  --ink-blue-link: var(--blue-400);

  /** Surface Colors - used for backgrounds **/
  --surface-white: var(--white);
  --surface-gray-1: var(--gray-50);
  --surface-gray-2: var(--gray-100);
  --surface-gray-3: var(--gray-200);
  --surface-gray-4: var(--gray-300);
  --surface-gray-5: var(--gray-700);
  --surface-gray-6: var(--gray-800);
  --surface-gray-7: var(--gray-900);

  --surface-red-1: var(--red-50);
  --surface-red-2: var(--red-100);
  --surface-red-3: var(--red-200);
  --surface-red-4: var(--red-300);
  --surface-red-5: var(--red-600);
  --surface-red-6: var(--red-700);
  --surface-red-7: var(--red-800);

  --surface-green-1: var(--green-50);
  --surface-green-2: var(--green-100);
  --surface-green-3: var(--green-200);
  --surface-green-4: var(--green-300);
  --surface-green-5: var(--green-600);
  --surface-green-6: var(--green-700);
  --surface-green-7: var(--green-800);

  --surface-amber-1: var(--amber-50);
  --surface-amber-2: var(--amber-100);
  --surface-amber-3: var(--amber-200);
  --surface-amber-4: var(--amber-300);
  --surface-amber-5: var(--amber-600);
  --surface-amber-6: var(--amber-700);
  --surface-amber-7: var(--amber-800);

  --surface-blue-1: var(--blue-50);
  --surface-blue-2: var(--blue-100);
  --surface-blue-3: var(--blue-200);
  --surface-blue-4: var(--blue-300);
  --surface-blue-5: var(--blue-600);
  --surface-blue-6: var(--blue-700);
  --surface-blue-7: var(--blue-800);

  --surface-orange-2: var(--orange-100);

  --surface-violet-2: var(--violet-100);
  --surface-violet-3: var(--violet-200);
  --surface-violet-4: var(--violet-300);
  --surface-violet-5: var(--violet-600);
  --surface-violet-6: var(--violet-700);
  --surface-violet-7: var(--violet-800);

  --surface-cyan-2: var(--cyan-100);

  --surface-menu-bar: var(--gray-50);
  --surface-cards: var(--white);
  --surface-modal: var(--white);
  --surface-selected: var(--white);

  /** Outline Colors - used for borders/outlines **/
  --outline-white: var(--white);
  --outline-gray-1: var(--gray-200);
  --outline-gray-2: var(--gray-300);
  --outline-gray-3: var(--gray-400);
  --outline-gray-4: var(--gray-500);
  --outline-gray-5: var(--gray-800);

  --outline-red-2: var(--red-300);
  --outline-red-3: var(--red-400);
  --outline-red-4: var(--red-500);

  --outline-green-2: var(--green-300);
  --outline-green-3: var(--green-400);
  --outline-green-4: var(--green-500);

  --outline-amber-2: var(--amber-300);
  --outline-amber-3: var(--amber-400);
  --outline-amber-4: var(--amber-500);

  --outline-blue-2: var(--blue-300);
  --outline-blue-3: var(--blue-400);
  --outline-blue-4: var(--blue-500);

  --outline-orange-3: var(--orange-400);

  --outline-violet-2: var(--violet-300);
  --outline-violet-3: var(--violet-400);
  --outline-violet-4: var(--violet-500);

  --outline-gray-modals: var(--gray-200);

  /** Focus Box Shadows **/
  --focus-shadow-gray: 0px 0px 0px 2px rgba(201, 201, 201, 0.9);
  --focus-shadow-blue: 0px 0px 0px 2px rgba(101, 185, 252, 0.9);
  --focus-shadow-green: 0px 0px 0px 2px rgba(94, 210, 156, 0.9);
  --focus-shadow-red: 0px 0px 0px 2px rgba(250, 156, 157, 0.9);
  --focus-shadow-amber: 0px 0px 0px 2px rgba(255, 218, 124, 0.9);

  /** Elevations **/
  --elevation-sm: 0px 1px 3px 0px rgba(0, 0, 0, 0.14), 0px 0px 1px 0px rgba(0, 0, 0, 0.14), 0px 0.25px 1.5px 0px rgba(255, 255, 255, 0.08) inset;
  --elevation-base: 0px 2px 5px 0px rgba(0, 0, 0, 0.14), 0px 0px 1.5px 0px rgba(0, 0, 0, 0.16), 0px 0.25px 1.5px 0px rgba(255, 255, 255, 0.08) inset;
  --elevation-md: 0px 6px 12px -2px rgba(0, 0, 0, 0.12), 0px 0px 6px 2px rgba(0, 0, 0, 0.03), 0px 0px 1.5px 0px rgba(0, 0, 0, 0.15), 0px 0.25px 1.5px 0px rgba(255, 255, 255, 0.08) inset;
  --elevation-lg: 0px 18px 22px -6px rgba(0, 0, 0, 0.1), 0px 0px 6px 3px rgba(0, 0, 0, 0.03), 0px 0px 1.5px 0px rgba(0, 0, 0, 0.18);
  --elevation-xl: 0px 24px 30px -8px rgba(0, 0, 0, 0.1), 0px 0px 10px 2px rgba(0, 0, 0, 0.04), 0px 0px 1px 0px rgba(0, 0, 0, 0.2), 0px 0.25px 2px 0px rgba(255, 255, 255, 0.15) inset;
  --elevation-2xl: 0px 44px 52px -10px rgba(0, 0, 0, 0.1), 0px 0px 10px 2px rgba(0, 0, 0, 0.03), 0px 0px 1.5px 0px rgba(0, 0, 0, 0.25), 0px 0.1px 2px 0px rgba(255, 255, 255, 0.08) inset;


}

.dark {

  /** Espresso Design System Colors - TODO: Convert these to oklch colors later when Espresso supports it **/
  --gray-50: #F8F8F8;
  --gray-100: #D9D9D9;
  --gray-200: #AFAFAF;
  --gray-250: #999999;
  --gray-300: #808080;
  --gray-400: #717171;
  --gray-450: #575757;
  --gray-500: #424242;
  --gray-600: #343434;
  --gray-700: #2B2B2B;
  --gray-800: #232323;
  --gray-900: #1C1C1C;
  --gray-950: #0F0F0F;

  --blue-50: #C9E0F5;
  --blue-100: #ADD2F5;
  --blue-200: #8CC1EC;
  --blue-300: #5AAEF2;
  --blue-400: #3294E3;
  --blue-500: #1580D8;
  --blue-600: #155999;
  --blue-700: #063D71;
  --blue-800: #052B53;
  --blue-900: #0E2037;
  --blue-950: #0B192C;

  --green-50: #C8F3DE;
  --green-100: #9BE6C1;
  --green-200: #78D7A9;
  --green-300: #58C08E;
  --green-400: #1DB269;
  --green-500: #0C9150;
  --green-600: #077241;
  --green-700: #035831;
  --green-800: #0A3F27;
  --green-900: #0B2E1C;
  --green-950: #0C2016;

  --red-50: #FFDEDE;
  --red-100: #FFC1C1;
  --red-200: #FE7C7C;
  --red-300: #EB4D52;
  --red-400: #D82727;
  --red-500: #B01F1F;
  --red-600: #862020;
  --red-700: #661717;
  --red-800: #521515;
  --red-900: #3C1316;
  --red-950: #2A0C0C;

  --amber-50: #FFE59A;
  --amber-100: #F4C25F;
  --amber-200: #FFAA3E;
  --amber-300: #FA961F;
  --amber-400: #E27E1B;
  --amber-500: #CB6D10;
  --amber-600: #975215;
  --amber-700: #753A07;
  --amber-800: #4B2606;
  --amber-900: #371E06;
  --amber-950: #281808;

  --orange-50: #FFCDAD;
  --orange-100: #FFA873;
  --orange-200: #FA8A40;
  --orange-300: #DE6D1B;
  --orange-400: #C45A0E;
  --orange-500: #984509;
  --orange-600: #823906;
  --orange-700: #683108;
  --orange-800: #532707;
  --orange-900: #361C09;
  --orange-950: #261407;

  --yellow-50: #FFEEB8;
  --yellow-100: #FFE386;
  --yellow-200: #F8D76A;
  --yellow-300: #ECC02E;
  --yellow-400: #DAAE15;
  --yellow-500: #C69C12;
  --yellow-600: #9C7A0A;
  --yellow-700: #705606;
  --yellow-800: #5B4605;
  --yellow-900: #3F3004;
  --yellow-950: #322604;

  --teal-50: #A0F7ED;
  --teal-100: #7EF3E7;
  --teal-200: #51DECF;
  --teal-300: #28BCAC;
  --teal-400: #1C988B;
  --teal-500: #1B7169;
  --teal-600: #145B54;
  --teal-700: #0B4942;
  --teal-800: #0B3A35;
  --teal-900: #0A2D29;
  --teal-950: #0A211E;

  --cyan-50: #D0F0FA;
  --cyan-100: #95E3F6;
  --cyan-200: #62CAE9;
  --cyan-300: #3CB8DC;
  --cyan-400: #1D94B9;
  --cyan-500: #107B9B;
  --cyan-600: #14667F;
  --cyan-700: #104F62;
  --cyan-800: #0D3B49;
  --cyan-900: #0C2D37;
  --cyan-950: #0C242D;

  --purple-50: #E5C6FB;
  --purple-100: #D9AFF5;
  --purple-200: #C993EF;
  --purple-300: #B168E8;
  --purple-400: #984BD8;
  --purple-500: #7A2DB9;
  --purple-600: #622195;
  --purple-700: #491870;
  --purple-800: #391457;
  --purple-900: #270E3B;
  --purple-950: #1F112A;

  --pink-50: #FFBBE4;
  --pink-100: #F69AD1;
  --pink-200: #ED77BE;
  --pink-300: #E359AB;
  --pink-400: #CB4394;
  --pink-500: #AC377D;
  --pink-600: #892660;
  --pink-700: #6F1D4D;
  --pink-800: #5B183F;
  --pink-900: #42132F;
  --pink-950: #341126;

  --violet-50: #CDBEFF;
  --violet-100: #BCA9FC;
  --violet-200: #9F87ED;
  --violet-300: #9478F8;
  --violet-400: #8363F1;
  --violet-500: #5A3EBA;
  --violet-600: #403397;
  --violet-700: #3D3286;
  --violet-800: #291D64;
  --violet-900: #1D1643;
  --violet-950: #161130;

  /** Ink Colors - used for text **/
  --ink-white: var(--gray-950);
  --ink-gray-1: var(--gray-800);
  --ink-gray-2: var(--gray-500);
  --ink-gray-3: var(--gray-450);
  --ink-gray-4: var(--gray-400);
  --ink-gray-5: var(--gray-300);
  --ink-gray-6: var(--gray-200);
  --ink-gray-7: var(--gray-100);
  --ink-gray-8: var(--gray-50);

  --ink-red-1: var(--white);
  --ink-red-2: var(--red-700);
  --ink-red-3: var(--red-400);
  --ink-red-4: var(--red-300);

  --ink-green-1: var(--white);
  --ink-green-2: var(--green-700);
  --ink-green-3: var(--green-400);
  --ink-green-4: var(--green-300);

  --ink-amber-1: var(--white);
  --ink-amber-2: var(--amber-700);
  --ink-amber-3: var(--amber-400);
  --ink-amber-4: var(--amber-300);

  --ink-blue-1: var(--white);
  --ink-blue-2: var(--blue-700);
  --ink-blue-3: var(--blue-400);
  --ink-blue-4: var(--blue-300);

  --ink-cyan-3: var(--cyan-400);

  --ink-violet-1: var(--white);
  --ink-violet-2: var(--violet-700);
  --ink-violet-3: var(--violet-400);
  --ink-violet-4: var(--violet-300);

  --ink-pink-1: var(--white);
  --ink-pink-2: var(--pink-700);
  --ink-pink-3: var(--pink-400);
  --ink-pink-4: var(--pink-300);

  --ink-blue-link: var(--blue-500);

  /** Surface Colors - used for backgrounds **/
  --surface-white: var(--gray-950);
  --surface-gray-1: var(--gray-800);
  --surface-gray-2: var(--gray-700);
  --surface-gray-3: var(--gray-600);
  --surface-gray-4: var(--gray-500);
  --surface-gray-5: var(--gray-200);
  --surface-gray-6: var(--gray-100);
  --surface-gray-7: var(--gray-50);

  --surface-red-1: var(--red-950);
  --surface-red-2: var(--red-900);
  --surface-red-3: var(--red-800);
  --surface-red-4: var(--red-700);
  --surface-red-5: var(--red-500);
  --surface-red-6: var(--red-400);
  --surface-red-7: var(--red-600);

  --surface-green-1: var(--green-950);
  --surface-green-2: var(--green-900);
  --surface-green-3: var(--green-800);
  --surface-green-4: var(--green-700);
  --surface-green-5: var(--green-500);
  --surface-green-6: var(--green-400);
  --surface-green-7: var(--green-600);

  --surface-amber-1: var(--amber-950);
  --surface-amber-2: var(--amber-900);
  --surface-amber-3: var(--amber-800);
  --surface-amber-4: var(--amber-700);
  --surface-amber-5: var(--amber-500);
  --surface-amber-6: var(--amber-400);
  --surface-amber-7: var(--amber-600);

  --surface-blue-1: var(--blue-950);
  --surface-blue-2: var(--blue-900);
  --surface-blue-3: var(--blue-800);
  --surface-blue-4: var(--blue-700);
  --surface-blue-5: var(--blue-500);
  --surface-blue-6: var(--blue-400);
  --surface-blue-7: var(--blue-600);

  --surface-orange-2: var(--orange-900);
  --surface-violet-2: var(--violet-900);
  --surface-violet-3: var(--violet-800);
  --surface-violet-4: var(--violet-700);
  --surface-violet-5: var(--violet-500);
  --surface-violet-6: var(--violet-400);
  --surface-violet-7: var(--violet-600);
  --surface-cyan-2: var(--cyan-900);

  --surface-menu-bar: var(--gray-950);
  --surface-cards: var(--gray-900);
  --surface-modal: var(--gray-800);
  --surface-selected: var(--gray-600);

  /** Outline Colors - used for borders/outlines **/
  --outline-white: var(--gray-950);
  --outline-gray-1: var(--gray-800);
  --outline-gray-2: var(--gray-600);
  --outline-gray-3: var(--gray-500);
  --outline-gray-4: var(--gray-450);
  --outline-gray-5: var(--gray-200);

  --outline-red-2: var(--red-800);
  --outline-red-3: var(--red-700);
  --outline-red-4: var(--red-600);

  --outline-green-2: var(--green-800);
  --outline-green-3: var(--green-700);
  --outline-green-4: var(--green-600);

  --outline-amber-2: var(--amber-800);
  --outline-amber-3: var(--amber-700);
  --outline-amber-4: var(--amber-600);

  --outline-blue-2: var(--blue-800);
  --outline-blue-3: var(--blue-700);
  --outline-blue-4: var(--blue-600);

  --outline-orange-3: var(--orange-700);
  --outline-violet-2: var(--violet-800);
  --outline-violet-3: var(--violet-700);
  --outline-violet-4: var(--violet-600);

  --outline-gray-modals: var(--gray-600);

  /** Focus Box Shadows **/
  --focus-shadow-gray: 0px 0px 0px 3px rgba(70, 70, 70, 0.8);
  --focus-shadow-blue: 0px 0px 0px 3px rgba(14, 61, 98, 0.8);
  --focus-shadow-green: 0px 0px 0px 3px rgba(29, 86, 59, 0.8);
  --focus-shadow-red: 0px 0px 0px 3px rgba(117, 24, 25, 0.8);
  --focus-shadow-amber: 0px 0px 0px 3px rgba(116, 72, 17, 0.8);

  /** Elevations **/
  --elevation-sm: 0px 1px 3px 0px rgba(0, 0, 0, 0.7), 0px 0px 14px 0px rgba(0, 0, 0, 0.18), 0px 0.5px 0.5px 0.5px rgba(255, 255, 255, 0.03) inset;
  --elevation-base: 0px 2px 5px 0px rgba(0, 0, 0, 0.6), 0px 0px 14px 0px rgba(0, 0, 0, 0.18), 0px 0.5px 0.5px 0.5px rgba(255, 255, 255, 0.03) inset;
  --elevation-md: 0px 6px 12px -2px rgba(0, 0, 0, 0.6), 0px 0px 16px 2px rgba(0, 0, 0, 0.2), 0px 0.5px 0.5px 0.5px rgba(255, 255, 255, 0.03) inset;
  --elevation-lg: 0px 18px 20px -8px rgba(0, 0, 0, 0.52), 0px 0px 16px 0px rgba(0, 0, 0, 0.1), 0px 0.5px 1.5px 0.5px rgba(255, 255, 255, 0.04) inset;
  --elevation-xl: 0px 26px 34px -6px rgba(0, 0, 0, 0.42), 0px 0px 14px 2px rgba(0, 0, 0, 0.12), 0px 0.5px 1.5px 0.5px rgba(255, 255, 255, 0.04) inset;
  --elevation-2xl: 0px 44px 52px -4px rgba(0, 0, 0, 0.42), 0px 0px 14px 10px rgba(0, 0, 0, 0.12), 0px 0.5px 1.5px 0.5px rgba(255, 255, 255, 0.06) inset;

}

@layer base {
  * {
    @apply border-outline-gray-modals outline-outline-gray-modals/50;
  }

  body {
    @apply bg-surface-white text-ink-gray-8;
  }
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.lucide {
  stroke-linecap: round;
  stroke-linejoin: round;
}

/** @shadcn/tailwind.css **/

@theme inline {
  @keyframes accordion-down {
    from {
      height: 0;
    }

    to {
      height: var(--radix-accordion-content-height,
          var(--accordion-panel-height, auto));
    }
  }

  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height,
          var(--accordion-panel-height, auto));
    }

    to {
      height: 0;
    }
  }
}

/* Custom variants */
@custom-variant data-open {

  &:where([data-state="open"]),
  &:where([data-open]:not([data-open="false"])) {
    @slot;
  }
}

@custom-variant data-closed {

  &:where([data-state="closed"]),
  &:where([data-closed]:not([data-closed="false"])) {
    @slot;
  }
}

@custom-variant data-checked {

  &:where([data-state="checked"]),
  &:where([data-checked]:not([data-checked="false"])) {
    @slot;
  }
}

@custom-variant data-unchecked {

  &:where([data-state="unchecked"]),
  &:where([data-unchecked]:not([data-unchecked="false"])) {
    @slot;
  }
}

@custom-variant data-selected {
  &:where([data-selected="true"]) {
    @slot;
  }
}

@custom-variant data-disabled {

  &:where([data-disabled="true"]),
  &:where([data-disabled]:not([data-disabled="false"])) {
    @slot;
  }
}

@custom-variant data-active {

  &:where([data-state="active"]),
  &:where([data-active]:not([data-active="false"])) {
    @slot;
  }
}

@custom-variant data-horizontal {
  &:where([data-orientation="horizontal"]) {
    @slot;
  }
}

@custom-variant data-vertical {
  &:where([data-orientation="vertical"]) {
    @slot;
  }
}

@utility no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}