/* iTech FluentUI Styles */

/* ===== INTER FONT FAMILY ===== */
/* All weights and styles included for use in iCaptur and other applications */

@font-face {
  font-family: 'Inter';
  src: url('./src/fonts/Inter-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('./src/fonts/Inter-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('./src/fonts/Inter-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('./src/fonts/Inter-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('./src/fonts/Inter-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('./src/fonts/Inter-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('./src/fonts/Inter-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('./src/fonts/Inter-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('./src/fonts/Inter-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('./src/fonts/Inter-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('./src/fonts/Inter-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('./src/fonts/Inter-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('./src/fonts/Inter-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('./src/fonts/Inter-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('./src/fonts/Inter-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('./src/fonts/Inter-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('./src/fonts/Inter-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('./src/fonts/Inter-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ===== INTER FONT UTILITY CLASSES ===== */
/* Use these classes in your iCaptur app: font-inter or font-['Inter'] */
.font-inter {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
}

/* Base Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#root {
  width: 100%;
  min-height: 100vh;
}

/* ===== CSS VARIABLES FROM FIGMA TOKENS (Exact Token Names Only) ===== */
:root {
  /* Brand Tokens */
  --brandBackground1Hover: var(--brand-70);
  --brandBackground1Pressed: var(--brand-40);
  --brandBackground1Rest: var(--brand-80);
  --brandBackground1Selected: var(--brand-60);
  --brandBackground2Hover: var(--brand-150);
  --brandBackground2Pressed: var(--brand-130);
  --brandBackground2Rest: var(--brand-160);
  --brandBackgroundCompoundHover: var(--brand-70);
  --brandBackgroundCompoundPressed: var(--brand-60);
  --brandBackgroundCompoundRest: var(--brand-80);
  --brandBackgroundInvertedHover: var(--brand-160);
  --brandBackgroundInvertedPressed: var(--brand-140);
  --brandBackgroundInvertedRest: #ffffff;
  --brandBackgroundInvertedSelected: var(--brand-150);
  --brandBackgroundStaticRest: var(--brand-80);
  --brandForeground1Rest: var(--brand-80);
  --brandForeground2Hover: var(--brand-60);
  --brandForeground2Pressed: var(--brand-30);
  --brandForeground2Rest: var(--brand-70);
  --brandForegroundCompoundHover: var(--brand-70);
  --brandForegroundCompoundPressed: var(--brand-60);
  --brandForegroundCompoundRest: var(--brand-80);
  --brandForegroundInvertedHover: var(--brand-110);
  --brandForegroundInvertedPressed: var(--brand-100);
  --brandForegroundInvertedRest: var(--brand-100);
  --brandForegroundLinkHover: var(--brand-60);
  --brandForegroundLinkPressed: var(--brand-40);
  --brandForegroundLinkRest: var(--brand-70);
  --brandForegroundLinkSelected: var(--brand-70);
  --brandForegroundOnLightHover: var(--brand-70);
  --brandForegroundOnLightPressed: var(--brand-50);
  --brandForegroundOnLightRest: var(--brand-80);
  --brandForegroundOnLightSelected: var(--brand-60);
  --brandStroke1Rest: var(--brand-80);
  --brandStroke2ContrastRest: var(--brand-140);
  --brandStroke2Hover: var(--brand-120);
  --brandStroke2Pressed: var(--brand-80);
  --brandStroke2Rest: var(--brand-140);
  --brandStrokeCompoundHover: var(--brand-70);
  --brandStrokeCompoundPressed: var(--brand-60);
  --brandStrokeCompoundRest: var(--brand-80);

  /* Neutral Background */
  --neutralBackground1Hover: var(--neutral-background-1-rest);
  --neutralBackground1Pressed: var(--brand-10);
  --neutralBackground1Rest: #ffffff;
  --neutralBackground1Selected: #e0e0e0;
  --neutralBackground2Hover: #f0f0f0;
  --neutralBackground2Pressed: #dbdbdb;
  --neutralBackground2Rest: #fafafa;
  --neutralBackground2Selected: #e6e6e6;
  --neutralBackground3Hover: #ebebeb;
  --neutralBackground3Pressed: #d6d6d6;
  --neutralBackground3Rest: #f5f5f5;
  --neutralBackground3Selected: #e0e0e0;
  --neutralBackground4Hover: #fafafa;
  --neutralBackground4Pressed: #f5f5f5;
  --neutralBackground4Rest: #f0f0f0;
  --neutralBackground4Selected: #ffffff;
  --neutralBackground5Hover: #f5f5f5;
  --neutralBackground5Pressed: #f0f0f0;
  --neutralBackground5Rest: #ebebeb;
  --neutralBackground5Selected: #fafafa;
  --neutralBackground6Rest: #e6e6e6;
  --neutralBackgroundAlpha1Rest: #ffffff;
  --neutralBackgroundAlpha2Rest: #ffffff;
  --neutralBackgroundDisabledRest: #f0f0f0;
  --neutralBackgroundInvertedDisabledRest: #ffffff;
  --neutralBackgroundInvertedRest: #292929;
  --neutralBackgroundOverlayRest: #000000;
  --neutralBackgroundOverlayScrollbarRest: #000000;
  --neutralBackgroundStaticRest: #333333;
  --neutralBackgroundStencil1Rest: #e6e6e6;
  --neutralBackgroundStencil2Rest: #fafafa;
  --neutralBackgroundSubtleHover: #f5f5f5;
  --neutralBackgroundSubtleInvertedHover: #000000;
  --neutralBackgroundSubtleInvertedPressed: #000000;
  --neutralBackgroundSubtleInvertedRest: #000000;
  --neutralBackgroundSubtleInvertedSelected: #000000;
  --neutralBackgroundSubtleLightAlphaHover: #ffffff;
  --neutralBackgroundSubtleLightAlphaPressed: #ffffff;
  --neutralBackgroundSubtleLightAlphaSelected: #ffffff;
  --neutralBackgroundSubtlePressed: #e0e0e0;
  --neutralBackgroundSubtleRest: #ffffff;
  --neutralBackgroundSubtleSelected: #ebebeb;
  --neutralBackgroundTransparentHover: #ffffff;
  --neutralBackgroundTransparentPressed: #ffffff;
  --neutralBackgroundTransparentRest: #ffffff;
  --neutralBackgroundTransparentSelected: #ffffff;

  /* Neutral Foreground */
  --neutralForeground1Hover: #242424;
  --neutralForeground1Pressed: #242424;
  --neutralForeground1Rest: #242424;
  --neutralForeground1Selected: #242424;
  --neutralForeground2BrandHover: var(--brand-80);
  --neutralForeground2BrandPressed: var(--brand-70);
  --neutralForeground2BrandSelected: var(--brand-80);
  --neutralForeground2Hover: #242424;
  --neutralForeground2LinkHover: #242424;
  --neutralForeground2LinkPressed: #242424;
  --neutralForeground2LinkRest: #424242;
  --neutralForeground2LinkSelected: #242424;
  --neutralForeground2Pressed: #242424;
  --neutralForeground2Rest: #424242;
  --neutralForeground2Selected: #242424;
  --neutralForeground3BrandHover: var(--brand-80);
  --neutralForeground3BrandPressed: var(--brand-70);
  --neutralForeground3BrandSelected: var(--brand-80);
  --neutralForeground3Hover: #424242;
  --neutralForeground3Pressed: #424242;
  --neutralForeground3Rest: #616161;
  --neutralForeground3Selected: #424242;
  --neutralForeground4Rest: #707070;
  --neutralForegroundDisabledRest: #bdbdbd;
  --neutralForegroundInverted1Hover: #ffffff;
  --neutralForegroundInverted1Pressed: #ffffff;
  --neutralForegroundInverted1Rest: #ffffff;
  --neutralForegroundInverted1Selected: #ffffff;
  --neutralForegroundInverted2Rest: #ffffff;
  --neutralForegroundInvertedDisabledRest: #ffffff;
  --neutralForegroundInvertedLinkHover: #ffffff;
  --neutralForegroundInvertedLinkPressed: #ffffff;
  --neutralForegroundInvertedLinkRest: #ffffff;
  --neutralForegroundInvertedLinkSelected: #ffffff;
  --neutralForegroundOnBrandRest: #ffffff;
  --neutralForegroundStaticInvertedRest: #ffffff;
  --neutralForegroundStaticRest: #242424;

  /* Neutral Stroke */
  --neutralStroke1Hover: #c7c7c7;
  --neutralStroke1Pressed: #b3b3b3;
  --neutralStroke1Rest: #d1d1d1;
  --neutralStroke1Selected: #bdbdbd;
  --neutralStroke2Rest: #e0e0e0;
  --neutralStroke3Rest: #f0f0f0;
  --neutralStrokeAccessibleHover: #575757;
  --neutralStrokeAccessiblePressed: #4d4d4d;
  --neutralStrokeAccessibleRest: #616161;
  --neutralStrokeAccessibleSelected: var(--brand-80);
  --neutralStrokeAlpha1Rest: #000000;
  --neutralStrokeAlpha2Rest: #ffffff;
  --neutralStrokeDisabledInvertedRest: #ffffff;
  --neutralStrokeDisabledRest: #e0e0e0;
  --neutralStrokeFocus1Rest: #ffffff;
  --neutralStrokeFocus2Rest: #000000;
  --neutralStrokeOnBrand21Rest: #ffffff;
  --neutralStrokeOnBrand2Hover: #ffffff;
  --neutralStrokeOnBrand2Pressed: #ffffff;
  --neutralStrokeOnBrand2Rest: #ffffff;
  --neutralStrokeOnBrand2Selected: #ffffff;
  --neutralStrokeSubtleRest: #e0e0e0;
  --neutralStrokeTransparentDisabledRest: #ffffff;
  --neutralStrokeTransparentInteractiveRest: #ffffff;
  --neutralStrokeTransparentRest: #ffffff;

  /* Status Colors */
  --statusAvailableForeground3Rest: #13a10e;
  --statusAwayBackground3Rest: #eaa300;
  --statusDangerBackground1Rest: #fdf3f4;
  --statusDangerBackground3Rest: #c50f1f;
  --statusDangerForeground1Rest: #b10e1c;
  --statusDangerForeground3Rest: #c50f1f;
  --statusDangerStroke1Rest: #eeacb2;
  --statusDangerStroke2Rest: #c50f1f;
  --statusSuccessBackground1Rest: #f1faf1;
  --statusSuccessBackground3Rest: #107c10;
  --statusSuccessForeground1Rest: #0e700e;
  --statusSuccessForeground3Rest: #107c10;
  --statusSuccessForegroundInvertedRest: #359b35;
  --statusSuccessStroke1Rest: #9fd89f;
  --statusSuccessStroke2Rest: #107c10;
  --statusWarningBackground1Rest: #fff9f5;
  --statusWarningBackground3Rest: #f7630c;
  --statusWarningForeground1Rest: #bc4b09;
  --statusWarningForeground2Rest: #8a3707;
  --statusWarningStroke1Rest: #fdcfb4;
  --statusOofForeground3Rest: #c239b3;
}

/* ===== FIGMA TEXT COLORS (Exact Token Names) ===== */
/* Neutral Foreground */
.text-Neutral-Foreground-1-Rest { color: var(--neutralForeground1Rest); }
.text-Neutral-Foreground-1-Hover { color: var(--neutralForeground1Hover); }
.text-Neutral-Foreground-1-Pressed { color: var(--neutralForeground1Pressed); }
.text-Neutral-Foreground-2-Rest { color: var(--neutralForeground2Rest); }
.text-Neutral-Foreground-3-Rest { color: var(--neutralForeground3Rest); }
.text-Neutral-Foreground-4-Rest { color: var(--neutralForeground4Rest); }
.text-Neutral-Foreground-Disabled-Rest { color: var(--neutralForegroundDisabledRest); }
.text-Neutral-Foreground-Inverted-Rest { color: var(--neutralForegroundInvertedRest); }
.text-Neutral-Foreground-On-Brand-Rest { color: var(--neutralForegroundOnBrandRest); }


/* Brand Foreground */
.text-Brand-Foreground-1-Rest { color: var(--brandForeground1Rest); }
.text-Brand-Foreground-2-Rest { color: var(--brandForeground2Rest); }
.text-Brand-Foreground-Link-Rest { color: var(--brandForegroundLinkRest); }
.text-Brand-Foreground-Link-Hover { color: var(--brandForegroundLinkHover); }
.text-Brand-Foreground-Link-Pressed { color: var(--brandForegroundLinkPressed); }

/* Status Foreground */
.text-Status-Danger-Foreground-1-Rest { color: var(--statusDangerForeground1Rest); }
.text-Status-Danger-Foreground-3-Rest { color: var(--statusDangerForeground3Rest); }
.text-Status-Success-Foreground-1-Rest { color: var(--statusSuccessForeground1Rest); }
.text-Status-Success-Foreground-3-Rest { color: var(--statusSuccessForeground3Rest); }
.text-Status-Success-Foreground-Inverted-Rest { color: var(--statusSuccessForegroundInvertedRest); }
.text-Status-Warning-Foreground-1-Rest { color: var(--statusWarningForeground1Rest); }
.text-Status-Warning-Foreground-2-Rest { color: var(--statusWarningForeground2Rest); }
.text-Status-Available-Foreground-3-Rest { color: var(--statusAvailableForeground3Rest); }
.text-Status-Oof-Foreground-3-Rest { color: var(--statusOofForeground3Rest); }

/* Neutral Foreground - Additional States */
.text-Neutral-Foreground-1-Selected { color: var(--neutralForeground1Selected); }
.text-Neutral-Foreground-2-Hover { color: var(--neutralForeground2Hover); }
.text-Neutral-Foreground-2-Pressed { color: var(--neutralForeground2Pressed); }
.text-Neutral-Foreground-2-Selected { color: var(--neutralForeground2Selected); }
.text-Neutral-Foreground-2-Brand-Hover { color: var(--neutralForeground2BrandHover); }
.text-Neutral-Foreground-2-Brand-Pressed { color: var(--neutralForeground2BrandPressed); }
.text-Neutral-Foreground-2-Brand-Selected { color: var(--neutralForeground2BrandSelected); }
.text-Neutral-Foreground-2-Link-Hover { color: var(--neutralForeground2LinkHover); }
.text-Neutral-Foreground-2-Link-Pressed { color: var(--neutralForeground2LinkPressed); }
.text-Neutral-Foreground-2-Link-Selected { color: var(--neutralForeground2LinkSelected); }
.text-Neutral-Foreground-3-Hover { color: var(--neutralForeground3Hover); }
.text-Neutral-Foreground-3-Pressed { color: var(--neutralForeground3Pressed); }
.text-Neutral-Foreground-3-Selected { color: var(--neutralForeground3Selected); }
.text-Neutral-Foreground-3-Brand-Hover { color: var(--neutralForeground3BrandHover); }
.text-Neutral-Foreground-3-Brand-Pressed { color: var(--neutralForeground3BrandPressed); }
.text-Neutral-Foreground-3-Brand-Selected { color: var(--neutralForeground3BrandSelected); }
.text-Neutral-Foreground-Inverted-1-Hover { color: var(--neutralForegroundInverted1Hover); }
.text-Neutral-Foreground-Inverted-1-Pressed { color: var(--neutralForegroundInverted1Pressed); }
.text-Neutral-Foreground-Inverted-1-Selected { color: var(--neutralForegroundInverted1Selected); }
.text-Neutral-Foreground-Inverted-Link-Hover { color: var(--neutralForegroundInvertedLinkHover); }
.text-Neutral-Foreground-Inverted-Link-Pressed { color: var(--neutralForegroundInvertedLinkPressed); }
.text-Neutral-Foreground-Inverted-Link-Selected { color: var(--neutralForegroundInvertedLinkSelected); }
.text-Neutral-Foreground-Static-Rest { color: var(--neutralForegroundStaticRest); }
.text-Neutral-Foreground-Static-Inverted-Rest { color: var(--neutralForegroundStaticInvertedRest); }

/* Brand Foreground - Additional States */
.text-Brand-Foreground-Compound-Hover { color: var(--brandForegroundCompoundHover); }
.text-Brand-Foreground-Compound-Pressed { color: var(--brandForegroundCompoundPressed); }
.text-Brand-Foreground-Compound-Rest { color: var(--brandForegroundCompoundRest); }
.text-Brand-Foreground-Inverted-Hover { color: var(--brandForegroundInvertedHover); }
.text-Brand-Foreground-Inverted-Pressed { color: var(--brandForegroundInvertedPressed); }
.text-Brand-Foreground-Inverted-Rest { color: var(--brandForegroundInvertedRest); }
.text-Brand-Foreground-Link-Selected { color: var(--brandForegroundLinkSelected); }
.text-Brand-Foreground-On-Light-Hover { color: var(--brandForegroundOnLightHover); }
.text-Brand-Foreground-On-Light-Pressed { color: var(--brandForegroundOnLightPressed); }
.text-Brand-Foreground-On-Light-Rest { color: var(--brandForegroundOnLightRest); }
.text-Brand-Foreground-On-Light-Selected { color: var(--brandForegroundOnLightSelected); }

/* ===== FIGMA BACKGROUND COLORS (Exact Token Names) ===== */
/* Neutral Background */
.bg-Neutral-Background-1-Rest { background-color: var(--neutralBackground1Rest); }
.bg-Neutral-Background-1-Hover { background-color: var(--neutralBackground1Hover); }
.bg-Neutral-Background-1-Pressed { background-color: var(--neutralBackground1Pressed); }
.bg-Neutral-Background-2-Rest { background-color: var(--neutralBackground2Rest); }
.bg-Neutral-Background-3-Rest { background-color: var(--neutralBackground3Rest); }
.bg-Neutral-Background-4-Rest { background-color: var(--neutralBackground4Rest); }
.bg-Neutral-Background-5-Rest { background-color: var(--neutralBackground5Rest); }
.bg-Neutral-Background-6-Rest { background-color: var(--neutralBackground6Rest); }
.bg-Neutral-Background-Disabled-Rest { background-color: var(--neutralBackgroundDisabledRest); }
.bg-Neutral-Background-Inverted-Rest { background-color: var(--neutralBackgroundInvertedRest); }
.bg-Neutral-Background-Transparent-Rest { background-color: var(--neutralBackgroundTransparentRest); }
/* Brand Background */
.bg-Brand-Background-1-Rest { background-color: var(--brandBackground1Rest); }
.bg-Brand-Background-1-Hover { background-color: var(--brandBackground1Hover); }
.bg-Brand-Background-1-Pressed { background-color: var(--brandBackground1Pressed); }
.bg-Brand-Background-2-Rest { background-color: var(--brandBackground2Rest); }
.bg-Brand-Background-Inverted-Rest { background-color: var(--brandBackgroundInvertedRest); }
.bg-Brand-Background-Compound-Rest { background-color: var(--brandBackgroundCompoundRest); }
.bg-Brand-Background-Compound-Hover { background-color: var(--brandBackgroundCompoundHover); }
.bg-Brand-Background-Compound-Pressed { background-color: var(--brandBackgroundCompoundPressed); }

/* Status Background */
.bg-Status-Danger-Background-1-Rest { background-color: var(--statusDangerBackground1Rest); }
.bg-Status-Danger-Background-3-Rest { background-color: var(--statusDangerBackground3Rest); }
.bg-Status-Success-Background-1-Rest { background-color: var(--statusSuccessBackground1Rest); }
.bg-Status-Success-Background-3-Rest { background-color: var(--statusSuccessBackground3Rest); }
.bg-Status-Warning-Background-1-Rest { background-color: var(--statusWarningBackground1Rest); }
.bg-Status-Warning-Background-3-Rest { background-color: var(--statusWarningBackground3Rest); }
.bg-Status-Away-Background-3-Rest { background-color: var(--statusAwayBackground3Rest); }

/* Neutral Background - Additional States */
.bg-Neutral-Background-1-Selected { background-color: var(--neutralBackground1Selected); }
.bg-Neutral-Background-2-Hover { background-color: var(--neutralBackground2Hover); }
.bg-Neutral-Background-2-Pressed { background-color: var(--neutralBackground2Pressed); }
.bg-Neutral-Background-2-Selected { background-color: var(--neutralBackground2Selected); }
.bg-Neutral-Background-3-Hover { background-color: var(--neutralBackground3Hover); }
.bg-Neutral-Background-3-Pressed { background-color: var(--neutralBackground3Pressed); }
.bg-Neutral-Background-3-Selected { background-color: var(--neutralBackground3Selected); }
.bg-Neutral-Background-4-Hover { background-color: var(--neutralBackground4Hover); }
.bg-Neutral-Background-4-Pressed { background-color: var(--neutralBackground4Pressed); }
.bg-Neutral-Background-4-Selected { background-color: var(--neutralBackground4Selected); }
.bg-Neutral-Background-5-Hover { background-color: var(--neutralBackground5Hover); }
.bg-Neutral-Background-5-Pressed { background-color: var(--neutralBackground5Pressed); }
.bg-Neutral-Background-5-Selected { background-color: var(--neutralBackground5Selected); }
.bg-Neutral-Background-Alpha-1-Rest { background-color: var(--neutralBackgroundAlpha1Rest); }
.bg-Neutral-Background-Alpha-2-Rest { background-color: var(--neutralBackgroundAlpha2Rest); }
.bg-Neutral-Background-Inverted-Disabled-Rest { background-color: var(--neutralBackgroundInvertedDisabledRest); }
.bg-Neutral-Background-Overlay-Rest { background-color: var(--neutralBackgroundOverlayRest); }
.bg-Neutral-Background-Overlay-Scrollbar-Rest { background-color: var(--neutralBackgroundOverlayScrollbarRest); }
.bg-Neutral-Background-Static-Rest { background-color: var(--neutralBackgroundStaticRest); }
.bg-Neutral-Background-Stencil-1-Rest { background-color: var(--neutralBackgroundStencil1Rest); }
.bg-Neutral-Background-Stencil-2-Rest { background-color: var(--neutralBackgroundStencil2Rest); }
.bg-Neutral-Background-Subtle-Hover { background-color: var(--neutralBackgroundSubtleHover); }
.bg-Neutral-Background-Subtle-Pressed { background-color: var(--neutralBackgroundSubtlePressed); }
.bg-Neutral-Background-Subtle-Rest { background-color: var(--neutralBackgroundSubtleRest); }
.bg-Neutral-Background-Subtle-Selected { background-color: var(--neutralBackgroundSubtleSelected); }
.bg-Neutral-Background-Transparent-Hover { background-color: var(--neutralBackgroundTransparentHover); }
.bg-Neutral-Background-Transparent-Pressed { background-color: var(--neutralBackgroundTransparentPressed); }
.bg-Neutral-Background-Transparent-Selected { background-color: var(--neutralBackgroundTransparentSelected); }

/* Brand Background - Additional States */
.bg-Brand-Background-1-Selected { background-color: var(--brandBackground1Selected); }
.bg-Brand-Background-2-Hover { background-color: var(--brandBackground2Hover); }
.bg-Brand-Background-2-Pressed { background-color: var(--brandBackground2Pressed); }
.bg-Brand-Background-Compound-Hover { background-color: var(--brandBackgroundCompoundHover); }
.bg-Brand-Background-Compound-Pressed { background-color: var(--brandBackgroundCompoundPressed); }
.bg-Brand-Background-Compound-Rest { background-color: var(--brandBackgroundCompoundRest); }
.bg-Brand-Background-Inverted-Hover { background-color: var(--brandBackgroundInvertedHover); }
.bg-Brand-Background-Inverted-Pressed { background-color: var(--brandBackgroundInvertedPressed); }
.bg-Brand-Background-Inverted-Selected { background-color: var(--brandBackgroundInvertedSelected); }
.bg-Brand-Background-Static-Rest { background-color: var(--brandBackgroundStaticRest); }


/* ===== FIGMA BORDER/STROKE COLORS (Exact Token Names) ===== */
.border-Neutral-Stroke-1-Rest { border-color: var(--neutralStroke1Rest); }
.border-Neutral-Stroke-1-Hover { border-color: var(--neutralStroke1Hover); }
.border-Neutral-Stroke-1-Pressed { border-color: var(--neutralStroke1Pressed); }
.border-Neutral-Stroke-1-Selected { border-color: var(--neutralStroke1Selected); }
.border-Neutral-Stroke-2-Rest { border-color: var(--neutralStroke2Rest); }
.border-Neutral-Stroke-3-Rest { border-color: var(--neutralStroke3Rest); }
.border-Neutral-Stroke-Accessible-Rest { border-color: var(--neutralStrokeAccessibleRest); }
.border-Neutral-Stroke-Accessible-Hover { border-color: var(--neutralStrokeAccessibleHover); }
.border-Neutral-Stroke-Accessible-Pressed { border-color: var(--neutralStrokeAccessiblePressed); }
.border-Neutral-Stroke-Accessible-Selected { border-color: var(--neutralStrokeAccessibleSelected); }
.border-Neutral-Stroke-Disabled-Rest { border-color: var(--neutralStrokeDisabledRest); }
.border-Neutral-Stroke-Alpha-1-Rest { border-color: var(--neutralStrokeAlpha1Rest); }
.border-Neutral-Stroke-Alpha-2-Rest { border-color: var(--neutralStrokeAlpha2Rest); }
.border-Neutral-Stroke-Focus-1-Rest { border-color: var(--neutralStrokeFocus1Rest); }
.border-Neutral-Stroke-Focus-2-Rest { border-color: var(--neutralStrokeFocus2Rest); }
.border-Neutral-Stroke-On-Brand-2-Rest { border-color: var(--neutralStrokeOnBrand2Rest); }
.border-Neutral-Stroke-On-Brand-2-Hover { border-color: var(--neutralStrokeOnBrand2Hover); }
.border-Neutral-Stroke-On-Brand-2-Pressed { border-color: var(--neutralStrokeOnBrand2Pressed); }
.border-Neutral-Stroke-On-Brand-2-Selected { border-color: var(--neutralStrokeOnBrand2Selected); }
.border-Neutral-Stroke-Subtle-Rest { border-color: var(--neutralStrokeSubtleRest); }
.border-Brand-Stroke-1-Rest { border-color: var(--brandStroke1Rest); }
.border-Brand-Stroke-2-Rest { border-color: var(--brandStroke2Rest); }
.border-Brand-Stroke-2-Contrast-Rest { border-color: var(--brandStroke2ContrastRest); }
.border-Brand-Stroke-2-Hover { border-color: var(--brandStroke2Hover); }
.border-Brand-Stroke-2-Pressed { border-color: var(--brandStroke2Pressed); }
.border-Brand-Stroke-Compound-Hover { border-color: var(--brandStrokeCompoundHover); }
.border-Brand-Stroke-Compound-Pressed { border-color: var(--brandStrokeCompoundPressed); }
.border-Brand-Stroke-Compound-Rest { border-color: var(--brandStrokeCompoundRest); }
.border-Status-Danger-Stroke-1-Rest { border-color: var(--statusDangerStroke1Rest); }
.border-Status-Danger-Stroke-2-Rest { border-color: var(--statusDangerStroke2Rest); }
.border-Status-Success-Stroke-1-Rest { border-color: var(--statusSuccessStroke1Rest); }
.border-Status-Success-Stroke-2-Rest { border-color: var(--statusSuccessStroke2Rest); }
.border-Status-Warning-Stroke-1-Rest { border-color: var(--statusWarningStroke1Rest); }

/* ===== BORDERS ===== */
.border { border: 1px solid var(--neutralStroke1Rest); }
.border-2 { border: 2px solid var(--neutralStroke1Rest); }

/* ===== TOAST ANIMATIONS ===== */
/* Modern Toast Animations */
@keyframes slideInRight {
  from {
    transform: translateX(calc(100% + 24px)) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(calc(-100% - 24px)) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

@keyframes slideInDown {
  from {
    transform: translateY(calc(-100% - 24px)) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes slideInUp {
  from {
    transform: translateY(calc(100% + 24px)) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateX(calc(100% + 24px)) scale(0.95);
    opacity: 0;
  }
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateX(calc(-100% - 24px)) scale(0.95);
    opacity: 0;
  }
}

@keyframes slideOutDown {
  from {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateY(calc(100% + 24px)) scale(0.95);
    opacity: 0;
  }
}

@keyframes slideOutUp {
  from {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateY(calc(-100% - 24px)) scale(0.95);
    opacity: 0;
  }
}

.animate-slideInRight {
  animation: slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.animate-slideInLeft {
  animation: slideInLeft 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.animate-slideInDown {
  animation: slideInDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.animate-slideInUp {
  animation: slideInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.animate-slideOutRight {
  animation: slideOutRight 0.3s cubic-bezier(0.4, 0, 1, 1) forwards !important;
}

.animate-slideOutLeft {
  animation: slideOutLeft 0.3s cubic-bezier(0.4, 0, 1, 1) forwards !important;
}

.animate-slideOutDown {
  animation: slideOutDown 0.3s cubic-bezier(0.4, 0, 1, 1) forwards !important;
}

.animate-slideOutUp {
  animation: slideOutUp 0.3s cubic-bezier(0.4, 0, 1, 1) forwards !important;
}

/* PhoneInput uses react-international-phone; its styles are imported in phone-input.tsx */