/* NOTE: Defined dark material colors. Don't change the values.
 Use the color's as variables .ClassName{ color: var(--Text-High);}
 */

:root {
	/* New variables */
	/* ================================
		Brand Colors - Primary
		================================ */
	--Brand-Colors-Primary-base: #0091FF;
	--Brand-Colors-Primary-25: #FBFDFF;
	--Brand-Colors-Primary-50: #F4FAFF;
	--Brand-Colors-Primary-100: #E6F4FF;
	--Brand-Colors-Primary-200: #CCE9FF;
	--Brand-Colors-Primary-300: #B3DEFF;
	--Brand-Colors-Primary-400: #99D3FF;
	--Brand-Colors-Primary-500: #66BDFF;
	--Brand-Colors-Primary-600: #33A7FF;
	--Brand-Colors-Primary-700: var(--Brand-Colors-Primary-base);
	--Brand-Colors-Primary-800: #0074CC;
	--Brand-Colors-Primary-900: #005799;
	--Brand-Colors-Primary-1000: #003A66;

	/* ================================
		Brand Colors - Secondary
		================================ */
	--Brand-Colors-Secondary-base: #E01E5A;
	--Brand-Colors-Secondary-50: #FEF4F7;
	--Brand-Colors-Secondary-100: #FEE7EE;
	--Brand-Colors-Secondary-200: #FCCEDC;
	--Brand-Colors-Secondary-300: #FAB8CD;
	--Brand-Colors-Secondary-400: #F38CAC;
	--Brand-Colors-Secondary-500: #F66D98;
	--Brand-Colors-Secondary-600: #E64B7B;
	--Brand-Colors-Secondary-700: var(--Brand-Colors-Secondary-base);
	--Brand-Colors-Secondary-800: #CA1B51;
	--Brand-Colors-Secondary-900: #9D153F;
	--Brand-Colors-Secondary-1000: #700F2D;

	/* ================================
		Brand Colors - Accent
		================================ */
	--Brand-Colors-Accent-base: #905FEC;
	--Brand-Colors-Accent-100: #F4EFFD;
	--Brand-Colors-Accent-200: #E9DFFB;
	--Brand-Colors-Accent-300: #DECFF9;
	--Brand-Colors-Accent-400: #D3BFF7;
	--Brand-Colors-Accent-500: #BC9FF4;
	--Brand-Colors-Accent-600: #B18FF2;
	--Brand-Colors-Accent-700: var(--Brand-Colors-Accent-base);
	--Brand-Colors-Accent-800: #734CBD;
	--Brand-Colors-Accent-900: #56398E;
	--Brand-Colors-Accent-1000: #3A265E;

	/* ================================
		Status Colors - Success
		================================ */
	--Status-Colors-Success-base: #1AB651;
	--Status-Colors-Success-100: #E7F9EE;
	--Status-Colors-Success-200: #CFF2DB;
	--Status-Colors-Success-300: #B7ECCA;
	--Status-Colors-Success-400: #A0E4B8;
	--Status-Colors-Success-500: #76D397;
	--Status-Colors-Success-600: #48C574;
	--Status-Colors-Success-700: var(--Status-Colors-Success-base);
	--Status-Colors-Success-800: #127F39;
	--Status-Colors-Success-900: #0D5B29;
	--Status-Colors-Success-1000: #083718;

	/* ================================
		Status Colors - Warning
		================================ */
	--Status-Colors-Warning-base: #E48B23;
	--Status-Colors-Warning-100: #FFF5E9;
	--Status-Colors-Warning-200: #FFEBD4;
	--Status-Colors-Warning-300: #FED7A9;
	--Status-Colors-Warning-400: #FEC27D;
	--Status-Colors-Warning-500: #FDAE52;
	--Status-Colors-Warning-600: #FD9A27;
	--Status-Colors-Warning-700: var(--Status-Colors-Warning-base);
	--Status-Colors-Warning-800: #B16C1B;
	--Status-Colors-Warning-900: #7F4D14;
	--Status-Colors-Warning-1000: #4C2E0C;

	/* ================================
		Status Colors - Error
		================================ */
	--Status-Colors-Error-base: #E70A0A;
	--Status-Colors-Error-100: #FDE7E7;
	--Status-Colors-Error-200: #FACECE;
	--Status-Colors-Error-300: #F8B6B6;
	--Status-Colors-Error-400: #F59D9D;
	--Status-Colors-Error-500: #F37272;
	--Status-Colors-Error-600: #ED4F4F;
	--Status-Colors-Error-700: var(--Status-Colors-Error-base);
	--Status-Colors-Error-800: #B90808;
	--Status-Colors-Error-900: #8B0606;
	--Status-Colors-Error-1000: #450303;

	/* ================================
		Neutral Colors - Main Neutrals
	================================ */
	--Neutral-Colors-Main-Neutrals-base: #4D5B66;
	--Neutral-Colors-Main-Neutrals-10: #F9FAFB;
	--Neutral-Colors-Main-Neutrals-25: #F8F8F8;
	--Neutral-Colors-Main-Neutrals-50: #F2F5FA;
	--Neutral-Colors-Main-Neutrals-75: #E1EBF0;
	--Neutral-Colors-Main-Neutrals-100: #E6E8E9;
	--Neutral-Colors-Main-Neutrals-200: #CCD0D3;
	--Neutral-Colors-Main-Neutrals-300: #B3B9BD;
	--Neutral-Colors-Main-Neutrals-400: #99A1A7;
	--Neutral-Colors-Main-Neutrals-500: #808A92;
	--Neutral-Colors-Main-Neutrals-600: #66727C;
	--Neutral-Colors-Main-Neutrals-700: var(--Neutral-Colors-Main-Neutrals-base);
	--Neutral-Colors-Main-Neutrals-800: #334350;
	--Neutral-Colors-Main-Neutrals-900: #1A2C3A;
	--Neutral-Colors-Main-Neutrals-1000: #001424;

	/* ================================
		Neutral Colors - Tonal Neutrals
	================================ */
	--Neutral-Colors-Tonal-Neutrals-base: #504D4E;
	--Neutral-Colors-Tonal-Neutrals-100: #E6E6E6;
	--Neutral-Colors-Tonal-Neutrals-200: #CDCCCC;
	--Neutral-Colors-Tonal-Neutrals-300: #B4B3B3;
	--Neutral-Colors-Tonal-Neutrals-400: #9B999A;
	--Neutral-Colors-Tonal-Neutrals-500: #828081;
	--Neutral-Colors-Tonal-Neutrals-600: #696767;
	--Neutral-Colors-Tonal-Neutrals-700: var(--Neutral-Colors-Tonal-Neutrals-base);
	--Neutral-Colors-Tonal-Neutrals-800: #373435;
	--Neutral-Colors-Tonal-Neutrals-900: #1E1A1B;
	--Neutral-Colors-Tonal-Neutrals-1000: #050102;

	/* ================================
		Neutral Colors - Grey (cooler/bluer ramp; distinct from Main-Neutrals)
	================================ */
	--Neutral-Colors-Grey-25: #FCFCFD;
	--Neutral-Colors-Grey-50: #F8F9FA;
	--Neutral-Colors-Grey-75: #F2F4F7;
	--Neutral-Colors-Grey-100: #EAECF0;
	--Neutral-Colors-Grey-200: #E4E7EC;
	--Neutral-Colors-Grey-300: #D0D5DD;
	--Neutral-Colors-Grey-400: #98A2B3;
	--Neutral-Colors-Grey-500: #667085;
	--Neutral-Colors-Grey-600: #475467;
	--Neutral-Colors-Grey-700: #344054;
	--Neutral-Colors-Grey-800: #1D2939;
	--Neutral-Colors-Grey-900: #101828;
	--Neutral-Colors-Grey-1000: #0C111D;

	/* ================================
	Alpha Neutrals
	================================ */
	--Neutral-Colors-Alpha-Neutrals-base: #001424;
	--Neutral-Colors-Alpha-Neutrals-100: #0014241A; /* 10% */
	--Neutral-Colors-Alpha-Neutrals-200: #00142426; /* 15% */
	--Neutral-Colors-Alpha-Neutrals-300: #00142433; /* 20% */
	--Neutral-Colors-Alpha-Neutrals-400: #00142440; /* 25% */
	--Neutral-Colors-Alpha-Neutrals-500: #0014244D; /* 30% */
	--Neutral-Colors-Alpha-Neutrals-600: #00142466; /* 40% */
	--Neutral-Colors-Alpha-Neutrals-700: #00142480; /* 50% */
	--Neutral-Colors-Alpha-Neutrals-800: #00142499; /* 60% */
	--Neutral-Colors-Alpha-Neutrals-900: #001424B3; /* 70% */
	--Neutral-Colors-Alpha-Neutrals-1000: #001424CC; /* 80% */

	/* ================================
	base colors - base
	================================ */
	--Base-Colors-Base-White: #FFFFFF;
	--Base-Colors-Base-Black: #000000;

	/* ================================
		Primary
	================================ */
	--Primary-Primary: var(--Brand-Colors-Primary-700);
	--Primary-Primary-Contrast: var(--Brand-Colors-Primary-100);
	--Primary-Hover: var(--Brand-Colors-Primary-900);
	--Primary-Hover-Contrast: var(--Brand-Colors-Primary-200);

	/* ================================
		Secondary
	================================ */
	--Secondary-Secondary: var(--Brand-Colors-Secondary-700);
	--Secondary-Secondary-Contrast: var(--Brand-Colors-Secondary-50);
	--Secondary-Hover: var(--Brand-Colors-Secondary-900);
	--Secondary-Hover-Contrast: var(--Brand-Colors-Secondary-200);

	/* ================================
		Accent
	================================ */
	--Accent-Accent: var(--Brand-Colors-Accent-700);
	--Accent-Accent-Contrast: var(--Brand-Colors-Accent-100);
	--Accent-Hover: var(--Brand-Colors-Accent-900);
	--Accent-Hover-Contrast: var(--Brand-Colors-Accent-200);

	/* ================================
		Success
	================================ */
	--Success-Success: var(--Status-Colors-Success-700);
	--Success-Success-Contrast: var(--Status-Colors-Success-100);
	--Success-Hover: var(--Status-Colors-Success-800);
	--Success-Hover-Contrast: var(--Status-Colors-Success-200);

	/* ================================
     Warning
     ================================ */
	--Warning-Warning: var(--Status-Colors-Warning-700);
	--Warning-Warning-Contrast: var(--Status-Colors-Warning-100);
	--Warning-Hover: var(--Status-Colors-Warning-800);
	--Warning-Hover-Contrast: var(--Status-Colors-Warning-200);

	/* ================================
		Error
	================================ */
	--Error-Error: var(--Status-Colors-Error-700);
	--Error-Error-Contrast: var(--Status-Colors-Error-100);
	--Error-Hover: var(--Status-Colors-Error-800);
	--Error-Hover-Contrast: var(--Status-Colors-Error-200);

	/* ================================
		Surface
	================================ */
	--Surface-Surface: var(--Neutral-Colors-Main-Neutrals-300);
	--Surface-Surface-lowest: var(--Base-Colors-Base-White);
	--Surface-Surface-low: var(--Neutral-Colors-Grey-100);
	--Surface-Surface-high: var(--Neutral-Colors-Grey-300);
	--Surface-Surface-highest: var(--Base-Colors-Base-White);
	--Surface-Surface-disabled: var(--Neutral-Colors-Main-Neutrals-100);
	--Surface-Surface-background: var(--Neutral-Colors-Main-Neutrals-50);
	--Surface-Primary: var(--Brand-Colors-Primary-100);
	--Surface-Secondary: var(--Brand-Colors-Secondary-50);
	--Surface-Accent: var(--Brand-Colors-Accent-100);
	--Surface-Warning: var(--Status-Colors-Warning-200);
	--Surface-Success: var(--Status-Colors-Success-100);
	--Surface-Error: var(--Status-Colors-Error-100);

	/* ================================
		Text
	================================ */
	--Text-Low: var(--Neutral-Colors-Main-Neutrals-500);
	--Text-Medium: var(--Neutral-Colors-Main-Neutrals-700);
	--Text-High: var(--Neutral-Colors-Main-Neutrals-900);
	--Text-Disabled: var(--Neutral-Colors-Main-Neutrals-300);
	--Text-White: var(--Base-Colors-Base-White);
	--Text-Primary: var(--Brand-Colors-Primary-700);
	--Text-Secondary: var(--Brand-Colors-Secondary-700);
	--Text-Accent: var(--Brand-Colors-Accent-700);
	--Text-Warning: var(--Status-Colors-Warning-700);
	--Text-Success: var(--Status-Colors-Success-700);
	--Text-Error: var(--Status-Colors-Error-700);

	/* Dropdown items recede (Text-Low); hover lifts to Text-High; only the selection stays prominent.
	   Same contract for menus, filters and sort — the tokens carry the per-mode difference. */
	/* Dropdown items recede (Text-Low); hover lifts to Text-High; only the selection stays prominent.
	   Same contract for menus, filters and sort — the tokens carry the per-mode difference. */
	--Dropdown-Item-Text: var(--Text-Medium);
	--Dropdown-Item-Bg-Hover: var(--Surface-Surface-background);
	--Dropdown-Item-Text-Hover: var(--Text-High);
	--Dropdown-Item-Bg-Selected: var(--Surface-Primary);
	--Dropdown-Item-Text-Selected: var(--Primary-Primary);

	/* Tag chips (tag-editor, .ap__tags, .searched__tag) — one source of truth per mode. */
	/* Tag chips (tag-editor, .ap__tags, .searched__tag) — one source of truth per mode. */
	--Tag-Bg: var(--Surface-Primary);
	--Tag-Text: var(--Primary-Primary);
	--Tag-Close-Icon: var(--Primary-Primary);
	/* Delete-hover fills the close segment rather than reddening the glyph. */
	--Tag-Close-Bg-Hover: var(--Primary-Primary);
	--Tag-Close-Icon-Hover: var(--Text-White);

	/* Neutral semantics — the flip layer for the Main-Neutrals ramp, which is fixed in both
	   modes. Light keeps the exact stop each usage had; dark is re-based in themes.css. */
	--Neutral-Text-Medium: var(--Neutral-Colors-Main-Neutrals-700);
	--Neutral-Text-Low: var(--Neutral-Colors-Main-Neutrals-500);
	--Neutral-Text-Muted: var(--Neutral-Colors-Main-Neutrals-400);
	--Neutral-Surface-Subtle: var(--Neutral-Colors-Main-Neutrals-25);
	--Neutral-Surface: var(--Neutral-Colors-Main-Neutrals-50);
	--Neutral-Surface-Muted: var(--Neutral-Colors-Main-Neutrals-100);
	--Neutral-Outline: var(--Neutral-Colors-Main-Neutrals-200);
	--Neutral-Outline-Subtle: var(--Neutral-Colors-Main-Neutrals-100);

	/* ================================
		Icons
	================================ */
	--Icons-Low: var(--Neutral-Colors-Main-Neutrals-500);
	--Icons-Medium: var(--Neutral-Colors-Main-Neutrals-700);
	--Icons-High: var(--Neutral-Colors-Main-Neutrals-900);
	--Icons-Disabled: var(--Neutral-Colors-Main-Neutrals-300);
	--Icons-White: var(--Base-Colors-Base-White);
	--Icons-Primary: var(--Brand-Colors-Primary-700);
	--Icons-Secondary: var(--Brand-Colors-Secondary-700);
	--Icons-Accent: var(--Brand-Colors-Accent-700);
	--Icons-Warning: var(--Status-Colors-Warning-700);
	--Icons-Success: var(--Status-Colors-Success-700);
	--Icons-Error: var(--Status-Colors-Error-700);

	/* ================================
		Outline
	================================ */
	--Outline-Low: var(--Neutral-Colors-Alpha-Neutrals-100);
	--Outline-Medium: var(--Neutral-Colors-Alpha-Neutrals-200);
	--Outline-High: var(--Neutral-Colors-Alpha-Neutrals-300);
	--Outline-Disabled: var(--Neutral-Colors-Alpha-Neutrals-100);
	--Outline-Primary: var(--Brand-Colors-Primary-100);
	--Outline-Secondary: var(--Brand-Colors-Secondary-50);
	--Outline-Accent: var(--Brand-Colors-Accent-200);
	--Outline-Warning: var(--Status-Colors-Warning-500);
	--Outline-Success: var(--Status-Colors-Success-500);
	--Outline-Error: var(--Status-Colors-Error-500);

	/* ================================
		Typography - Font Size
	================================ */
	--Font-Size-1: 0.714rem;  /* 8px */
	--Font-Size-2: 0.893rem;  /* 10px */
	--Font-Size-3: 1.071rem;  /* 12px */
	--Font-Size-4: 1.25rem;   /* 14px */
	--Font-Size-5: 1.429rem;  /* 16px */
	--Font-Size-6: 1.607rem;  /* 18px */
	--Font-Size-7: 1.786rem;  /* 20px */
	--Font-Size-8: 2.143rem;  /* 24px */
	--Font-Size-9: 2.5rem;    /* 28px */
	--Font-Size-10: 2.857rem; /* 32px */
	--Font-Size-11: 3.571rem; /* 40px */
	/* ================================
		Typography - Weight
	================================ */
	--Weight-Thin: 100;
	--Weight-ExtraLight: 200;
	--Weight-Light: 300;
	--Weight-Regular: 400;
	--Weight-Medium: 500;
	--Weight-SemiBold: 600;
	--Weight-Bold: 700;
	--Weight-ExtraBold: 800;
	--Weight-Black: 900;
	/* ================================
		Typography - Heading Styles
	================================ */

	/* Heading - H1 (32px) */
	--Heading-H1-Regular-Size: 2.857rem;     /* 32px */
	--Heading-H1-Medium-Size: 2.857rem;      /* 32px */
	--Heading-H1-SemiBold-Size: 2.857rem;    /* 32px */
	--Heading-H1-Regular-Line-Height: 1.2;
	--Heading-H1-Medium-Line-Height: 1.2;
	--Heading-H1-SemiBold-Line-Height: 1.2;

	/* Heading - H2 (28px) */
	--Heading-H2-Regular-Size: 2.5rem;       /* 28px */
	--Heading-H2-Medium-Size: 2.5rem;        /* 28px */
	--Heading-H2-SemiBold-Size: 2.5rem;      /* 28px */
	--Heading-H2-Regular-Line-Height: 1.2;
	--Heading-H2-Medium-Line-Height: 1.2;
	--Heading-H2-SemiBold-Line-Height: 1.2;

	/* Heading - H3 (24px) */
	--Heading-H3-Regular-Size: 2.143rem;     /* 24px */
	--Heading-H3-Medium-Size: 2.143rem;      /* 24px */
	--Heading-H3-SemiBold-Size: 2.143rem;    /* 24px */
	--Heading-H3-Regular-Line-Height: 1.2;
	--Heading-H3-Medium-Line-Height: 1.2;
	--Heading-H3-SemiBold-Line-Height: 1.2;

	/* Heading - H4 (20px) */
	--Heading-H4-Regular-Size: 1.786rem;     /* 20px */
	--Heading-H4-Medium-Size: 1.786rem;      /* 20px */
	--Heading-H4-SemiBold-Size: 1.786rem;    /* 20px */
	--Heading-H4-Regular-Line-Height: 1.2;
	--Heading-H4-Medium-Line-Height: 1.2;
	--Heading-H4-SemiBold-Line-Height: 1.2;
	/* ================================
		Typography - Body Styles
	================================ */
	/* Line heights — ratios applied as multipliers of font-size. Body 1.5 / Headings 1.2 / Caption 1.4. */
	/* Body - B1 (18px) */
	--Body-B1-Regular-Size: var(--Font-Size-6);        	/* 18px */
	--Body-B1-Medium-Size: var(--Font-Size-6);         /* 18px */
	--Body-B1-SemiBold-Size: var(--Font-Size-6);       /* 18px */
	--Body-B1-Regular-Line-Height: 1.5;
	--Body-B1-Medium-Line-Height: 1.5;
	--Body-B1-SemiBold-Line-Height: 1.5;

	/* Body - B2 (16px) */
	--Body-B2-Regular-Size: var(--Font-Size-5);        /* 16px */
	--Body-B2-Medium-Size: var(--Font-Size-5);         /* 16px */
	--Body-B2-SemiBold-Size: var(--Font-Size-5);       /* 16px */
	--Body-B2-Regular-Line-Height: 1.5;
	--Body-B2-Medium-Line-Height: 1.5;
	--Body-B2-SemiBold-Line-Height: 1.5;

	/* Body - B3 (14px) */
	--Body-B3-Regular-Size: var(--Font-Size-4);         /* 14px */
	--Body-B3-Medium-Size: var(--Font-Size-4);          /* 14px */
	--Body-B3-SemiBold-Size: var(--Font-Size-4);        /* 14px */
	--Body-B3-Regular-Line-Height: 1.5;
	--Body-B3-Medium-Line-Height: 1.5;
	--Body-B3-SemiBold-Line-Height: 1.5;

	/* Body - B4 (12px) */
	--Body-B4-Regular-Size: var(--Font-Size-3);        /* 12px */
	--Body-B4-Medium-Size: var(--Font-Size-3);         /* 12px */
	--Body-B4-SemiBold-Size: var(--Font-Size-3);       /* 12px */
	--Body-B4-Regular-Line-Height: 1.5;
	--Body-B4-Medium-Line-Height: 1.5;
	--Body-B4-SemiBold-Line-Height: 1.5;

	/* Body - B5 (10px) */
	--Body-B5-Regular-Size: var(--Font-Size-2);        /* 10px */
	--Body-B5-Medium-Size: var(--Font-Size-2);         /* 10px */
	--Body-B5-SemiBold-Size: var(--Font-Size-2);       /* 10px */
	--Body-B5-Regular-Line-Height: 1.4;
	--Body-B5-Medium-Line-Height: 1.4;
	--Body-B5-SemiBold-Line-Height: 1.4;

	/* Body - B6 (8px) */
	--Body-B6-Regular-Size: var(--Font-Size-1);        /* 8px */
	--Body-B6-Medium-Size: var(--Font-Size-1);         /* 8px */
	--Body-B6-SemiBold-Size: var(--Font-Size-1);       /* 8px */
	--Body-B6-Regular-Line-Height: 1.4;
	--Body-B6-Medium-Line-Height: 1.4;
	--Body-B6-SemiBold-Line-Height: 1.4;

	/* Button typography */
	--Button-B1-Large-Size: var(--Font-Size-5);   /* 16px */
	--Button-B1-Medium-Size: var(--Font-Size-4);  /* 14px */
	--Button-B1-Small-Size: var(--Font-Size-3);   /* 12px */
	--Button-B1-Large-Line-Height: 1.5;
	--Button-B1-Medium-Line-Height: 1.5;
	--Button-B1-Small-Line-Height: 1.5;
	/* ================================
		Spacing
	================================ */
	--Spacing-XS: 0.179rem;   /* 2px */
	--Spacing-S: 0.357rem;    /* 4px */
	--Spacing-M: 0.536rem;    /* 6px */
	--Spacing-L: 0.714rem;    /* 8px */
	--Spacing-XL: 1.071rem;   /* 12px */
	--Spacing-2XL: 1.429rem;  /* 16px */
	--Spacing-3XL: 1.786rem;  /* 20px */
	--Spacing-4XL: 2.143rem;  /* 24px */
	--Spacing-5XL: 2.857rem;  /* 32px */
	--Spacing-6XL: 4.286rem;  /* 48px */
	--Spacing-7XL: 5rem;      /* 56px */
	--Spacing-8XL: 5.714rem;  /* 64px */
	--Spacing-9XL: 6.429rem;  /* 72px */
	--Spacing-10XL: 8.214rem; /* 92px */
	/* ================================
		Corner Radius - Radius
	================================ */
	--Radius-S: 0.357rem;     /* 4px */
	--Radius-M: 0.714rem;     /* 8px */
	--Radius-L: 1.071rem;     /* 12px */
	--Radius-XL: 1.429rem;    /* 16px */
	--Radius-2XL: 1.786rem;   /* 20px */
	--Radius-3XL: 2.143rem;   /* 24px */
	--Radius-Null: 89.286rem; /* 999px */
	/* ================================
		Stroke
	================================ */
	--Stroke-S: 0.045rem;     /* 0.5px */
	--Stroke-M: 0.089rem;     /* 1px */
	--Stroke-L: 0.134rem;     /* 1.5px */
	--Stroke-XL: 0.179rem;    /* 2px */
	/* ================================
		Effects
	================================ */
	--Effects-1: 0.179rem;    /* 2px */
	--Effects-2: 0.357rem;    /* 4px */
	--Effects-3: 0.536rem;    /* 6px */
	--Effects-4: 0.714rem;    /* 8px */
	--Effects-5: 0.893rem;    /* 10px */
	--Effects-6: 1.071rem;    /* 12px */
	--Effects-7: 1.25rem;     /* 14px */
	--Effects-8: 1.429rem;    /* 16px */
	--Effects-9: 1.607rem;    /* 18px */
	--Effects-10: 1.786rem;   /* 20px */
	/* ================================
		Icons - Sizes
	================================ */
	--Icon-Size-XS: 1.429rem;     /* 16px */
	--Icon-Size-Small: 1.607rem;  /* 18px */
	--Icon-Size-Medium: 1.786rem; /* 20px */
	--Icon-Size-Large: 2.143rem;  /* 24px */


	/* Old variables */
   /*  Colors */
   /*  Gradiantas */
   --bluegradiant:linear-gradient(44.73deg, #1F263E 0%, #6066B5 100%);
   --lightbluegradiant:linear-gradient(90deg, #7792D6 0%, #3464CF 100%);
   --darkbluegradiant:linear-gradient(145.87deg, #43579B 0%, #111C47 100%);
   --purpulegradiant: linear-gradient(15.76deg, #5A65F2 0%, #7533D7 100%);
   --bluewhitegradiant: linear-gradient(158.67deg, #7489C9 0%, #405198 100%);
   --lightNavygradiant: linear-gradient(270deg, #6D75C8 0%, #5B7BF6 100%);
   /* New Color scheme */
   /* FONT */
   --default-font-size: 1.6rem;
   /* Shadow */
   --boxshadow: 0px 4px 11px rgba(0, 0, 0, 0.15);
   --boxshadowdark:0 1px 6px 0 rgba(32, 33, 36, 0.28);
   --boxshadowlight:0 0 17px 1px rgba(32, 33, 36, 0.1);
   --boxshadowlight2:0px 4px 22px rgba(13, 61, 98, 0.19);
   --boxshadowlighter:0 6px 18px 0 rgba(0, 0, 0, 0.05);
   --boxshadowspeard: 0 8px 48px 0 rgba(0,0,0,0.17);

   /* GRID */
   --guttergap: 3.333rem;
   --grid-width: 114rem;
   --gutter-vertical: 1.667rem;
   --gutter-vertical-small: 6rem;
   --gutter-horizontal: 6rem;

   /* Units */
   --small: 2rem;
   --medium: 4rem;
   --big: 6rem;
   --ap-icon-space:0.5rem;
   --ap-icon-space-med:0.7rem;
   --ap-icon-space-big:1rem;

   /* Radius */
   --smallR: 0.8333rem;
   --mediumR: 1.333rem;
   --circleR: 50%;
   --radius: 5px;
   --widgetRadius: 8px;
   --widgetRadius-5: 5px;
   --widgetRadius-3: 3px;
   /* Platform */
   --pass: var(--Status-Colors-Success-base);
   --fail: var(--Status-Colors-Error-base);
   --risk: var(--Status-Colors-Warning-base);
   --crash: var(--Status-Colors-Error-900);
   --low: var(--Brand-Colors-Primary-700);
   --ap-page-bg: var(--Surface-Surface-background);
   --ap-font-roboto:'Roboto', sans-serif;
   --ap-font-open:'Open', sans-serif;
   --ap-accent-color: var(--Brand-Colors-Primary-700);
   --ap-accent-light-color: var(--Brand-Colors-Primary-100);
   --ap-dropdown-hover-bg-colour: var(--Surface-Surface-low);
   --ap-dropdown-hover-border: var(--Outline-Medium);
   --ap-severity-low: var(--Brand-Colors-Primary-base);
   --ap-severity-bg-low: var(--Surface-Primary);
   --ap-severity-medium: #2EB6AD;
   --ap-severity-bg-medium: #45D9D020;
   --ap-severity-high: var(--Status-Colors-Warning-600);
   --ap-severity-bg-high: var(--Surface-Warning);
   --ap-severity-critical: var(--Status-Colors-Error-600);
   --ap-severity-bg-critical: var(--Surface-Error);
   --ap-issue-obs:#525DF9;
   --ap-issue-imp: var(--Brand-Colors-Primary-base);
   --ap-issue-bug: var(--Status-Colors-Error-600);
   --ap-issue-new: var(--Status-Colors-Success-base);
   --ap-issue-sug: var(--Brand-Colors-Accent-500);
   --ap-status-new: var(--Status-Colors-Success-base);
   --ap-status-new-bg: var(--Surface-Success);
   --ap-status-inprogress: var(--Status-Colors-Warning-base);
   --ap-status-inprogress-bg: var(--Surface-Warning);
   --ap-status-fixed: var(--Brand-Colors-Primary-base);
   --ap-status-fixed-bg: var(--Surface-Primary);
   --ap-status-not-fixed: var(--Brand-Colors-Accent-base);
   --ap-status-not-fixed-bg: var(--Surface-Accent);
   --ap-status-released: var(--Brand-Colors-Primary-base);
   --ap-status-released-bg: var(--Surface-Primary);
   --ap-status-cancelled: var(--Neutral-Colors-Main-Neutrals-500);
   --ap-status-cancelled-bg: var(--Surface-Surface-low);
   --ap-status-closed: var(--Text-High);
   --ap-status-closed-bg: var(--Surface-Surface-high);
   --test:#eaedf1b8;

   /* Tier-2 literal-zero: dedicated fixed tokens for the remaining decorative palette.
      Value-preserving (same hex the legacy vars resolved to); intentionally do NOT flip
      in dark mode — these are brand/identity/data-viz colors, legible on any canvas. */
   --Avatar-Green: #1AB651;          /* was --mountainmeadow (avatar tiles) */
   --Avatar-Gray-1: #979797;         /* was --fordgray (avatar tiles + separators) */
   --Avatar-Gray-2: #9E9E9E;         /* was --grey */
   --Avatar-Gray-3: #9B9B9B;         /* was --dustygray */
   --Plan-Free: #1AB651;             /* was --mountainmeadow (plan free/appsumo badge) */
   --Plan-Bg-Free: #19BE7E20;        /* plan free badge tint */
   --Plan-Bg-Growth: #DCE9FF;        /* plan growth/standard badge tint */
   --Plan-Bg-Appsumo: #DDFFE9;       /* plan appsumo badge tint */
   --Plan-Bg-Pro: #FD9A2720;         /* plan pro/trial badge tint */
   --Icon-Category-Brown: #795548;   /* was --brown (FA category icon) */
   --Icon-Category-Teal: #009688;    /* was --teal (FA category icon) */
   --Illustration-Cyan: #00BCD4;     /* was --cyan (empty-state illustration) */
   --Surface-Chrome-Dark: #313137;   /* was --tuna (dark tooltip/chrome bg) */
   --Action-Fab: #F7453E;            /* was --sunsetorange (floating action button) */
   --Status-Solid-Error: #F44336;    /* was --red (solid delete/error button fills) */
   --Status-Solid-Success: #4CAF50;  /* was --green (solid success button fills) */
}