
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
/* Base styles for @idds/styles */
/* This file contains colors and reset styles */
:root {
  /* Neutral Colors */
  --ina-neutral-25: #ffffff;
  --ina-neutral-50: #f8f8f7;
  --ina-neutral-100: #f5f5f5;
  --ina-neutral-200: #e5e5e5;
  --ina-neutral-300: #d4d4d4;
  --ina-neutral-400: #a3a3a3;
  --ina-neutral-500: #737373;
  --ina-neutral-600: #525252;
  --ina-neutral-700: #404040;
  --ina-neutral-800: #1f1f1f;
  --ina-neutral-900: #141414;
  --ina-neutral-1000: #050505;

  --ina-primary-25: #ffffff;
  --ina-primary-50: #f8f8f7;
  --ina-primary-100: #f5f5f5;
  --ina-primary-200: #e5e5e5;
  --ina-primary-300: #d4d4d4;
  --ina-primary-400: #a3a3a3;
  --ina-primary-500: #737373;
  --ina-primary-600: #525252;
  --ina-primary-700: #404040;
  --ina-primary-800: #1f1f1f;
  --ina-primary-900: #141414;
  --ina-primary-primary: #141414;

  --ina-secondary-25: #f2f9fd;
  --ina-secondary-50: #e3f0fb;
  --ina-secondary-100: #c1e3f6;
  --ina-secondary-200: #8accef;
  --ina-secondary-300: #4cb2e4;
  --ina-secondary-400: #269dd8;
  --ina-secondary-500: #177ab2;
  --ina-secondary-600: #146190;
  --ina-secondary-700: #145378;
  --ina-secondary-800: #164564;
  --ina-secondary-900: #0f2d42;

  /* Blue Colors */
  --ina-blue-50: #fafcff;
  --ina-blue-100: #ecf3fe;
  --ina-blue-200: #dceafe;
  --ina-blue-300: #84b4fb;
  --ina-blue-400: #4d93fc;
  --ina-blue-500: #0968f6;
  --ina-blue-600: #0049b8;
  --ina-blue-700: #002a69;
  --ina-blue-800: #0e192a;
  --ina-blue-900: #070e17;

  /* Cyan Colors */
  --ina-cyan-50: #fafeff;
  --ina-cyan-100: #ebfaff;
  --ina-cyan-200: #d2f3fe;
  --ina-cyan-300: #83defc;
  --ina-cyan-400: #51d0fb;
  --ina-cyan-500: #09bbf6;
  --ina-cyan-600: #008bb9;
  --ina-cyan-700: #00506b;
  --ina-cyan-800: #0a3442;
  --ina-cyan-900: #032530;

  /* Green Colors */
  --ina-green-50: #fafffa;
  --ina-green-100: #edfded;
  --ina-green-200: #e0fae0;
  --ina-green-300: #a6f0a5;
  --ina-green-400: #4ce160;
  --ina-green-500: #3cc14e;
  --ina-green-600: #288034;
  --ina-green-700: #1b561a;
  --ina-green-800: #0c310d;
  --ina-green-900: #021d06;

  /* Lime Colors */
  --ina-lime-50: #fdfffa;
  --ina-lime-100: #f7ffeb;
  --ina-lime-200: #ecfed2;
  --ina-lime-300: #ccfc83;
  --ina-lime-400: #b7fb51;
  --ina-lime-500: #97f609;
  --ina-lime-600: #6fb900;
  --ina-lime-700: #406b00;
  --ina-lime-800: #2c420a;
  --ina-lime-900: #1e3003;

  /* Yellow Colors */
  --ina-yellow-50: #fffefa;
  --ina-yellow-100: #fff9eb;
  --ina-yellow-200: #fff8d5;
  --ina-yellow-300: #ffe58a;
  --ina-yellow-400: #ffcc14;
  --ina-yellow-500: #eebb04;
  --ina-yellow-600: #855f00;
  --ina-yellow-700: #553b06;
  --ina-yellow-800: #312102;
  --ina-yellow-900: #1c1402;

  /* Orange Colors */
  --ina-orange-50: #fffdfa;
  --ina-orange-100: #fff3eb;
  --ina-orange-200: #fee4d2;
  --ina-orange-300: #fcb583;
  --ina-orange-400: #fc974f;
  --ina-orange-500: #f66a09;
  --ina-orange-600: #b84d00;
  --ina-orange-700: #6b2d00;
  --ina-orange-800: #42210a;
  --ina-orange-900: #301603;

  /* Red Colors */
  --ina-red-50: #fffafa;
  --ina-red-100: #fdeded;
  --ina-red-200: #ffe0e0;
  --ina-red-300: #ffa0a0;
  --ina-red-400: #ff5c5c;
  --ina-red-500: #f02d2d;
  --ina-red-600: #d50b0b;
  --ina-red-700: #570303;
  --ina-red-800: #2a0303;
  --ina-red-900: #1d0202;

  /* Pink Colors */
  --ina-pink-50: #fffafd;
  --ina-pink-100: #ffebf8;
  --ina-pink-200: #fed2ef;
  --ina-pink-300: #fc83d3;
  --ina-pink-400: #fb51c2;
  --ina-pink-500: #f609a7;
  --ina-pink-600: #b9007b;
  --ina-pink-700: #6b0047;
  --ina-pink-800: #420a2f;
  --ina-pink-900: #300321;

  /* Magenta Colors */
  --ina-magenta-50: #fefaff;
  --ina-magenta-100: #fbebff;
  --ina-magenta-200: #f5d2fe;
  --ina-magenta-300: #e483fc;
  --ina-magenta-400: #d951fb;
  --ina-magenta-500: #c709f6;
  --ina-magenta-600: #9400b9;
  --ina-magenta-700: #56006b;
  --ina-magenta-800: #370a42;
  --ina-magenta-900: #270330;

  /* Purple Colors */
  --ina-purple-50: #fdfaff;
  --ina-purple-100: #f7ebff;
  --ina-purple-200: #ecd2fe;
  --ina-purple-300: #cc83fc;
  --ina-purple-400: #b751fb;
  --ina-purple-500: #9709f6;
  --ina-purple-600: #6f00b9;
  --ina-purple-700: #40006b;
  --ina-purple-800: #2c0a42;
  --ina-purple-900: #1e0330;

  /* Indigo Colors */
  --ina-indigo-50: #fafaff;
  --ina-indigo-100: #ebeaff;
  --ina-indigo-200: #d2d3fe;
  --ina-indigo-300: #8387fc;
  --ina-indigo-400: #5157fb;
  --ina-indigo-500: #0911f6;
  --ina-indigo-600: #0006b9;
  --ina-indigo-700: #00046b;
  --ina-indigo-800: #0a0c42;
  --ina-indigo-900: #030630;

  /* overlay */
  --ina-overlay: #1f1f1f7a;
}
:root {
  /* Font Sizes */
  --ina-font-3xs: 0.5rem; /* 8px */
  --ina-font-2xs: 0.625rem; /* 10px */
  --ina-font-xs: 0.75rem; /* 12px */
  --ina-font-sm: 0.875rem; /* 14px */
  --ina-font-base: 1rem; /* 16px */
  --ina-font-lg: 1.125rem; /* 18px */
  --ina-font-xl: 1.25rem; /* 20px */
  --ina-font-2xl: 1.5rem; /* 24px */
  --ina-font-3xl: 1.875rem; /* 30px */
  --ina-font-4xl: 2.25rem; /* 36px */

  /* Line Heights */
  --ina-line-height-xs: 1rem; /* 16px */
  --ina-line-height-sm: 1.25rem; /* 20px */
  --ina-line-height-base: 1.5rem; /* 24px */
  --ina-line-height-lg: 1.75rem; /* 28px */
  --ina-line-height-xl: 2rem; /* 32px */

  /* Font Weights */
  --ina-font-thin: 100;
  --ina-font-extralight: 200;
  --ina-font-light: 300;
  --ina-font-normal: 400;
  --ina-font-medium: 500;
  --ina-font-semibold: 600;
  --ina-font-bold: 700;
  --ina-font-extrabold: 800;
  --ina-font-black: 900;

  /* Spacing */
  --ina-spacing-0-5: 0.125rem; /* 2px */
  --ina-spacing-1: 0.25rem; /* 4px */
  --ina-spacing-1-5: 0.375rem; /* 6px */
  --ina-spacing-2: 0.5rem; /* 8px */
  --ina-spacing-2-5: 0.625rem; /* 10px */
  --ina-spacing-3: 0.75rem; /* 12px */
  --ina-spacing-3-5: 0.875rem; /* 14px */
  --ina-spacing-4: 1rem; /* 16px */
  --ina-spacing-4-5: 1.125rem; /* 18px */
  --ina-spacing-5: 1.25rem; /* 20px */
  --ina-spacing-5-5: 1.375rem; /* 22px */
  --ina-spacing-6: 1.5rem; /* 24px */
  --ina-spacing-6-5: 1.625rem; /* 26px */
  --ina-spacing-7: 1.75rem; /* 28px */
  --ina-spacing-7-5: 1.875rem; /* 30px */
  --ina-spacing-8: 2rem; /* 32px */
  --ina-spacing-8-5: 2.125rem; /* 34px */
  --ina-spacing-9: 2.25rem; /* 36px */
  --ina-spacing-9-5: 2.375rem; /* 38px */
  --ina-spacing-10: 2.5rem; /* 40px */
  --ina-spacing-10-5: 2.625rem; /* 42px */
  --ina-spacing-11: 2.75rem; /* 44px */
  --ina-spacing-11-5: 2.875rem; /* 46px */
  --ina-spacing-12: 3rem; /* 48px */
  --ina-spacing-12-5: 3.125rem; /* 50px */
  --ina-spacing-13: 3.25rem; /* 52px */
  --ina-spacing-13-5: 3.375rem; /* 54px */
  --ina-spacing-14: 3.5rem; /* 56px */
  --ina-spacing-14-5: 3.625rem; /* 58px */
  --ina-spacing-15: 3.75rem; /* 60px */
  --ina-spacing-15-5: 3.875rem; /* 62px */
  --ina-spacing-16: 4rem; /* 64px */
  --ina-spacing-16-5: 4.125rem; /* 66px */
  --ina-spacing-17: 4.25rem; /* 68px */
  --ina-spacing-17-5: 4.375rem; /* 70px */
  --ina-spacing-18: 4.5rem; /* 72px */
  --ina-spacing-18-5: 4.625rem; /* 74px */
  --ina-spacing-19: 4.75rem; /* 76px */
  --ina-spacing-19-5: 4.875rem; /* 78px */
  --ina-spacing-20: 5rem; /* 80px */
  --ina-spacing-20-5: 5.125rem; /* 82px */
  --ina-spacing-21: 5.25rem; /* 84px */
  --ina-spacing-21-5: 5.375rem; /* 86px */
  --ina-spacing-22: 5.5rem; /* 88px */
  --ina-spacing-22-5: 5.625rem; /* 90px */
  --ina-spacing-23: 5.75rem; /* 92px */
  --ina-spacing-23-5: 5.875rem; /* 94px */
  --ina-spacing-24: 6rem; /* 96px */
  /* Border Radius */
  --ina-radius-sm: 0.125rem; /* 2px */
  --ina-radius-base: 0.25rem; /* 4px */
  --ina-radius-md: 0.375rem; /* 6px */
  --ina-radius-lg: 0.5rem; /* 8px */
  --ina-radius-xl: 0.75rem; /* 12px */
  --ina-radius-2xl: 1rem; /* 16px */
  --ina-radius-full: 9999px;

  /* Shadows */
  --ina-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ina-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --ina-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --ina-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --ina-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* Transition */
  --ina-transition-fast: 150ms ease-in-out;
  --ina-transition-base: 200ms ease-in-out;
  --ina-transition-slow: 300ms ease-in-out;

  /* Breakpoints untuk responsive design */
  --ina-breakpoint-sm: 640px;
  --ina-breakpoint-md: 768px;
  --ina-breakpoint-lg: 1024px;
  --ina-breakpoint-xl: 1280px;
}
/* Import brand-specific theme files - MUST be at the top */
/* InaPas Theme - Passport & Immigration Services */
[data-brand='inapas'] {
  /* Primary Colors - Red/Coral theme (Figma InaPas) */
  --ina-primary-25: #fef2f2;
  --ina-primary-50: #f9dcdc;
  --ina-primary-100: #f9cdc7;
  --ina-primary-200: #ffa194;
  --ina-primary-300: #ff5f42;
  --ina-primary-400: #e8422d;
  --ina-primary-500: #cc1515;
  --ina-primary-600: #a00000;
  --ina-primary-700: #680000;
  --ina-primary-800: #290404;
  --ina-primary-900: #140202;
  --ina-primary-primary: #cc1515;

  /* Accent Colors - Green theme */
  --ina-accent-100: #f6fef9 !important;
  --ina-accent-200: #ecfef3 !important;
  --ina-accent-300: #d1fadf !important;
  --ina-accent-400: #a6f4c5 !important;
  --ina-accent-500: #12b76a !important;
  --ina-accent-600: #039855 !important;
  --ina-accent-700: #027a48 !important;

  /* Interactive Colors */
  --ina-inapas-brand-hover: #155eef !important;
  --ina-inapas-neutral-hover: #f9fafb !important;
}
/* InaGov Theme - Government Services */
[data-brand='inagov'] {
  /* Primary Colors - Government Blue theme (Figma InaGov) */
  --ina-primary-25: #f6f9ff;
  --ina-primary-50: #eff5fd;
  --ina-primary-100: #c0d7f9;
  --ina-primary-200: #a1c4f5;
  --ina-primary-300: #629cef;
  --ina-primary-400: #196bcd;
  --ina-primary-500: #0956c3;
  --ina-primary-600: #0a489f;
  --ina-primary-700: #083575;
  --ina-primary-800: #022a5b;
  --ina-primary-900: #041225;
  --ina-primary-primary: #629cef;

  /* Secondary Colors - Orange/Peach theme */
  --ina-secondary-25: #ffffff;
  --ina-secondary-50: #ffffff;
  --ina-secondary-100: #ffffff;
  --ina-secondary-200: #fff5ee;
  --ina-secondary-300: #ffe8cc;
  --ina-secondary-400: #ffd2a6;
  --ina-secondary-500: #edb98a;
  --ina-secondary-600: #d39663;
  --ina-secondary-700: #cc1515;

  /* Accent Colors - Orange theme (Legacy - kept for backward compatibility) */
  --ina-accent-100: #ffffff !important;
  --ina-accent-200: #fff5ee !important;
  --ina-accent-300: #ffe8cc !important;
  --ina-accent-400: #ffd2a6 !important;
  --ina-accent-500: #edb98a !important;
  --ina-accent-600: #d39663 !important;
  --ina-accent-700: #cc1515 !important;

  /* Interactive Colors */
  --ina-brand-hover: #588cd7 !important;
  --ina-neutral-hover: #edeff5 !important;
}
/* InaKu Theme - Citizen Services */
[data-brand='inaku'] {
  /* Primary Colors - Citizen Dark Blue theme (Figma InaKu) */
  --ina-primary-25: #e8f1fc;
  --ina-primary-50: #d9e9f9;
  --ina-primary-100: #abd1ff;
  --ina-primary-200: #629cef;
  --ina-primary-300: #3a78c1;
  --ina-primary-400: #194472;
  --ina-primary-500: #06264d;
  --ina-primary-600: #041d35;
  --ina-primary-700: #020f1f;
  --ina-primary-800: #020b17;
  --ina-primary-900: #01080f;
  --ina-primary-primary: #06264d;

  /* Accent Colors - Gray Blue theme */
  --ina-accent-100: #ffffff !important;
  --ina-accent-200: #6a7d94 !important;
  --ina-accent-300: #06264d !important;
  --ina-accent-400: #051c3a !important;
  --ina-accent-500: #031327 !important;
  --ina-accent-600: #000000 !important;
  --ina-accent-700: #6a7d94 !important;

  /* Interactive Colors */
  --ina-inaku-brand-hover: #b81313 !important;
  --ina-inaku-neutral-hover: #fafafa !important;
}
/* BGN Theme - Banking & Financial Services */
[data-brand='bgn'] {
  /* Primary Colors - Navy Blue theme */
  --ina-primary-50: #eff6ff;
  --ina-primary-100: #dbeafe;
  --ina-primary-200: #bfdbfe;
  --ina-primary-300: #93c5fd;
  --ina-primary-400: #60a5fa;
  --ina-primary-500: #3b82f6;
  --ina-primary-600: #2563eb;
  --ina-primary-700: #1d4ed8;
  --ina-primary-800: #1e40af;
  --ina-primary-900: #1e3a8a;
  --ina-primary-primary: #005494;

  /* Brand-specific colors */
  --ina-bgn-brand-primary: #005494 !important;
  --ina-bgn-stroke-primary: #ededed !important;
  --ina-background-tertiary: #f5f5f5 !important;

  /* Sentiment colors */
  --ina-sentiment-info-400: #528aff !important;
  --ina-sentiment-info-500: #2871ff !important;
  --ina-sentiment-positive-500: #12b76a !important;
  --ina-sentiment-warning-500: #f79009 !important;

  /* Accent colors */
  --ina-accent-coral-orange: #ff7b5a !important;
  --ina-accent-yellow: #ffcb00 !important;
}
/* BKN Theme - Badan Kepegawaian Negara */
[data-brand='bkn'] {
  /* Primary Colors - Pink/Red theme */
  --ina-primary-25: #fdf2f7;
  --ina-primary-50: #fde6f1;
  --ina-primary-100: #fdcde3;
  --ina-primary-200: #fca5cb;
  --ina-primary-300: #f96da7;
  --ina-primary-400: #f24286;
  --ina-primary-500: #de1d5e;
  --ina-primary-600: #c41249;
  --ina-primary-700: #a2123c;
  --ina-primary-800: #871436;
  --ina-primary-900: #53041a;
  --ina-primary-primary: #de1d5e;

  /* Secondary Colors - Blue theme */
  --ina-secondary-25: #f2f9fd;
  --ina-secondary-50: #e3f0fb;
  --ina-secondary-100: #c1e3f6;
  --ina-secondary-200: #8accef;
  --ina-secondary-300: #4cb2e4;
  --ina-secondary-400: #269dd8;
  --ina-secondary-500: #177ab2;
  --ina-secondary-600: #146190;
  --ina-secondary-700: #145378;
  --ina-secondary-800: #164564;
  --ina-secondary-900: #0f2d42;

  /* Interactive Colors */
  --ina-bkn-brand-hover: #c41249 !important;
  --ina-bkn-neutral-hover: #fafafa !important;
}
/* LAN Theme - Local Area Network */
[data-brand='lan'] {
  /* Primary Colors - Blue theme */
  --ina-primary-25: #f3f6fc;
  --ina-primary-50: #e5edf9;
  --ina-primary-100: #c6daf1;
  --ina-primary-200: #94bde5;
  --ina-primary-300: #5b9bd5;
  --ina-primary-400: #3781c7;
  --ina-primary-500: #2663a3;
  --ina-primary-600: #1f4f85;
  --ina-primary-700: #1e446e;
  --ina-primary-800: #1e3a5c;
  --ina-primary-900: #14263d;
  --ina-primary-primary: #2663a3;

  /* Secondary Colors - Yellow/Orange theme */
  --ina-secondary-25: #fffdeb;
  --ina-secondary-50: #fdf9c8;
  --ina-secondary-100: #fbf38c;
  --ina-secondary-200: #f9e650;
  --ina-secondary-300: #f7d628;
  --ina-secondary-400: #f2bd1d;
  --ina-secondary-500: #d69009;
  --ina-secondary-600: #b1670c;
  --ina-secondary-700: #905110;
  --ina-secondary-800: #764111;
  --ina-secondary-900: #442204;

  /* Accent Colors */
  --ina-accent-red: #a40f0a;
  --ina-accent-green: #1cbd19;
  --ina-accent-blue: #0a35c0;
  --ina-accent-orange: #f08519;

  /* Interactive Colors */
  --ina-lan-brand-hover: #1f4f85 !important;
  --ina-lan-neutral-hover: #fafafa !important;
}
/* PANRB Theme*/
[data-brand='panrb'] {
  /* Primary Colors - Red/Maroon theme */
  --ina-primary-25: #fdf3f3;
  --ina-primary-50: #fce4e4;
  --ina-primary-100: #facecf;
  --ina-primary-200: #f5acad;
  --ina-primary-300: #ed7c7e;
  --ina-primary-400: #e15254;
  --ina-primary-500: #cd3537;
  --ina-primary-600: #b42b2d;
  --ina-primary-700: #8f2527;
  --ina-primary-800: #772526;
  --ina-primary-900: #400f10;
  --ina-primary-primary: #b42b2d;

  /* Secondary Colors - Grey/Purple-brown theme */
  --ina-secondary-25: #f8f7f8;
  --ina-secondary-50: #f0eeee;
  --ina-secondary-100: #ded9da;
  --ina-secondary-200: #c1b8bb;
  --ina-secondary-300: #9f9196;
  --ina-secondary-400: #847379;
  --ina-secondary-500: #6c5d62;
  --ina-secondary-600: #584c50;
  --ina-secondary-700: #4b4144;
  --ina-secondary-800: #41393b;
  --ina-secondary-900: #231f20;

  --ina-accent-yellow: #f2c548;
}
/* Base Colors - Light Mode (Default) */
:root,
[data-theme='light'] {
  /* Base Colors */
  --ina-white: var(--ina-neutral-25);
  --ina-black: var(--ina-neutral-900);

  /* Background Colors */
  --ina-background-primary: var(--ina-neutral-25);
  --ina-background-secondary: var(--ina-neutral-50);
  --ina-background-tertiary: var(--ina-neutral-100);
  --ina-background-overlay: var(--ina-overlay);

  /* Content Colors */
  --ina-content-primary: var(--ina-neutral-800);
  --ina-content-secondary: var(--ina-neutral-600);
  --ina-content-tertiary: var(--ina-neutral-400);
  --ina-content-guide: var(--ina-blue-500);
  --ina-content-negative: var(--ina-red-500);
  --ina-content-positive: var(--ina-green-600);

  /* Stroke Colors */
  --ina-stroke-primary: var(--ina-neutral-200);
  --ina-stroke-secondary: var(--ina-neutral-400);
  --ina-stroke-tertiary: var(--ina-neutral-900);

  /* Guide Colors */
  --ina-guide-50: var(--ina-blue-50);
  --ina-guide-100: var(--ina-blue-100);
  --ina-guide-200: var(--ina-blue-200);
  --ina-guide-300: var(--ina-blue-300);
  --ina-guide-400: var(--ina-blue-400);
  --ina-guide-500: var(--ina-blue-500);
  --ina-guide-600: var(--ina-blue-600);
  --ina-guide-700: var(--ina-blue-700);
  --ina-guide-800: var(--ina-blue-800);
  --ina-guide-900: var(--ina-blue-900);

  /* Negative Colors */
  --ina-negative-50: var(--ina-red-50);
  --ina-negative-100: var(--ina-red-100);
  --ina-negative-200: var(--ina-red-200);
  --ina-negative-300: var(--ina-red-300);
  --ina-negative-400: var(--ina-red-400);
  --ina-negative-500: var(--ina-red-500);
  --ina-negative-600: var(--ina-red-600);
  --ina-negative-700: var(--ina-red-700);
  --ina-negative-800: var(--ina-red-800);
  --ina-negative-900: var(--ina-red-900);
  --ina-sentiment-negative-50: var(--ina-red-50);
  --ina-sentiment-negative-100: var(--ina-red-100);
  --ina-sentiment-negative-200: var(--ina-red-200);
  --ina-sentiment-negative-300: var(--ina-red-300);
  --ina-sentiment-negative-400: var(--ina-red-400);
  --ina-sentiment-negative-500: var(--ina-red-500);
  --ina-sentiment-negative-600: var(--ina-red-600);
  --ina-sentiment-negative-700: var(--ina-red-700);
  --ina-sentiment-negative-800: var(--ina-red-800);
  --ina-sentiment-negative-900: var(--ina-red-900);

  /* Positive Colors */
  --ina-positive-50: var(--ina-green-50);
  --ina-positive-100: var(--ina-green-100);
  --ina-positive-200: var(--ina-green-200);
  --ina-positive-300: var(--ina-green-300);
  --ina-positive-400: var(--ina-green-400);
  --ina-positive-500: var(--ina-green-500);
  --ina-positive-600: var(--ina-green-600);
  --ina-positive-700: var(--ina-green-700);
  --ina-positive-800: var(--ina-green-800);
  --ina-positive-900: var(--ina-green-900);
  --ina-sentiment-positive-50: var(--ina-green-50);
  --ina-sentiment-positive-100: var(--ina-green-100);
  --ina-sentiment-positive-200: var(--ina-green-200);
  --ina-sentiment-positive-300: var(--ina-green-300);
  --ina-sentiment-positive-400: var(--ina-green-400);
  --ina-sentiment-positive-500: var(--ina-green-500);
  --ina-sentiment-positive-600: var(--ina-green-600);
  --ina-sentiment-positive-700: var(--ina-green-700);
  --ina-sentiment-positive-800: var(--ina-green-800);

  /* Warning Colors */
  --ina-warning-50: var(--ina-yellow-50);
  --ina-warning-100: var(--ina-yellow-100);
  --ina-warning-200: var(--ina-yellow-200);
  --ina-warning-300: var(--ina-yellow-300);
  --ina-warning-400: var(--ina-yellow-400);
  --ina-warning-500: var(--ina-yellow-500);
  --ina-warning-600: var(--ina-yellow-600);
  --ina-warning-700: var(--ina-yellow-700);
  --ina-warning-800: var(--ina-yellow-800);
  --ina-warning-900: var(--ina-yellow-900);
  --ina-sentiment-warning-50: var(--ina-yellow-50);
  --ina-sentiment-warning-100: var(--ina-yellow-100);
  --ina-sentiment-warning-200: var(--ina-yellow-200);
  --ina-sentiment-warning-300: var(--ina-yellow-300);
  --ina-sentiment-warning-400: var(--ina-yellow-400);
  --ina-sentiment-warning-500: var(--ina-yellow-500);
  --ina-sentiment-warning-600: var(--ina-yellow-600);
  --ina-sentiment-warning-700: var(--ina-yellow-700);
  --ina-sentiment-warning-800: var(--ina-yellow-800);
}
/* Base Colors - Dark Mode */
[data-theme='dark'] {
  /* Base Colors */
  --ina-white: var(--ina-neutral-900);
  --ina-black: var(--ina-neutral-25);

  /* Background Colors */
  --ina-background-primary: var(--ina-neutral-900);
  --ina-background-secondary: var(--ina-neutral-800);
  --ina-background-tertiary: var(--ina-neutral-700);
  --ina-background-overlay: var(--ina-overlay);

  /* Content Colors */
  --ina-content-primary: var(--ina-neutral-25);
  --ina-content-secondary: var(--ina-neutral-400);
  --ina-content-tertiary: var(--ina-neutral-500);
  --ina-content-guide: var(--ina-blue-400);
  --ina-content-negative: var(--ina-red-400);
  --ina-content-positive: var(--ina-green-500);

  /* Stroke Colors */
  --ina-stroke-primary: var(--ina-neutral-700);
  --ina-stroke-secondary: var(--ina-neutral-400);
  --ina-stroke-tertiary: var(--ina-neutral-200);

  /* Guide Colors */
  --ina-guide-50: var(--ina-blue-50);
  --ina-guide-100: var(--ina-blue-100);
  --ina-guide-200: var(--ina-blue-200);
  --ina-guide-300: var(--ina-blue-300);
  --ina-guide-400: var(--ina-blue-400);
  --ina-guide-500: var(--ina-blue-500);
  --ina-guide-600: var(--ina-blue-600);
  --ina-guide-700: var(--ina-blue-700);
  --ina-guide-800: var(--ina-blue-800);
  --ina-guide-900: var(--ina-blue-900);

  /* Negative Colors */
  --ina-negative-50: var(--ina-red-50);
  --ina-negative-100: var(--ina-red-100);
  --ina-negative-200: var(--ina-red-200);
  --ina-negative-300: var(--ina-red-300);
  --ina-negative-400: var(--ina-red-400);
  --ina-negative-500: var(--ina-red-500);
  --ina-negative-600: var(--ina-red-600);
  --ina-negative-700: var(--ina-red-700);
  --ina-negative-800: var(--ina-red-800);
  --ina-negative-900: var(--ina-red-900);
  --ina-sentiment-negative-50: var(--ina-red-50);
  --ina-sentiment-negative-100: var(--ina-red-100);
  --ina-sentiment-negative-200: var(--ina-red-200);
  --ina-sentiment-negative-300: var(--ina-red-300);
  --ina-sentiment-negative-400: var(--ina-red-400);
  --ina-sentiment-negative-500: var(--ina-red-500);
  --ina-sentiment-negative-600: var(--ina-red-600);
  --ina-sentiment-negative-700: var(--ina-red-700);
  --ina-sentiment-negative-800: var(--ina-red-800);
  --ina-sentiment-negative-900: var(--ina-red-900);

  /* Positive Colors */
  --ina-positive-50: var(--ina-green-50);
  --ina-positive-100: var(--ina-green-100);
  --ina-positive-200: var(--ina-green-200);
  --ina-positive-300: var(--ina-green-300);
  --ina-positive-400: var(--ina-green-400);
  --ina-positive-500: var(--ina-green-500);
  --ina-positive-600: var(--ina-green-600);
  --ina-positive-700: var(--ina-green-700);
  --ina-positive-800: var(--ina-green-800);
  --ina-positive-900: var(--ina-green-900);
  --ina-sentiment-positive-50: var(--ina-green-50);
  --ina-sentiment-positive-100: var(--ina-green-100);
  --ina-sentiment-positive-200: var(--ina-green-200);
  --ina-sentiment-positive-300: var(--ina-green-300);
  --ina-sentiment-positive-400: var(--ina-green-400);
  --ina-sentiment-positive-500: var(--ina-green-500);
  --ina-sentiment-positive-600: var(--ina-green-600);
  --ina-sentiment-positive-700: var(--ina-green-700);
  --ina-sentiment-positive-800: var(--ina-green-800);

  /* Warning Colors */
  --ina-warning-50: var(--ina-yellow-50);
  --ina-warning-100: var(--ina-yellow-100);
  --ina-warning-200: var(--ina-yellow-200);
  --ina-warning-300: var(--ina-yellow-300);
  --ina-warning-400: var(--ina-yellow-400);
  --ina-warning-500: var(--ina-yellow-500);
  --ina-warning-600: var(--ina-yellow-600);
  --ina-warning-700: var(--ina-yellow-700);
  --ina-warning-800: var(--ina-yellow-800);
  --ina-warning-900: var(--ina-yellow-900);
  --ina-sentiment-warning-50: var(--ina-yellow-50);
  --ina-sentiment-warning-100: var(--ina-yellow-100);
  --ina-sentiment-warning-200: var(--ina-yellow-200);
  --ina-sentiment-warning-300: var(--ina-yellow-300);
  --ina-sentiment-warning-400: var(--ina-yellow-400);
  --ina-sentiment-warning-500: var(--ina-yellow-500);
  --ina-sentiment-warning-600: var(--ina-yellow-600);
  --ina-sentiment-warning-700: var(--ina-yellow-700);
  --ina-sentiment-warning-800: var(--ina-yellow-800);
  --ina-sentiment-warning-900: var(--ina-yellow-900);
}
/* =========================== */
/* CSS RESET & BASE STYLES     */
/* =========================== */
/* Import Google Fonts - Inter */
/* =========================== */
/* CSS RESET RULES             */
/* =========================== */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}
/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}
/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  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;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}
/* Remove default styling from form elements */
input,
textarea,
select {
  /* border: none; */
  outline: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/* Remove default focus styles */
input:focus,
textarea:focus,
select:focus,
button:focus {
  outline: none;
  box-shadow: none;
}
/* Remove default border and background from specific input types */
input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='url'],
input[type='number'],
input[type='date'],
input[type='time'],
input[type='datetime-local'],
input[type='month'],
input[type='week'] {
  /* border: none; */
  outline: none;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/* Remove default styling from textarea */
textarea {
  /* border: none; */
  outline: none;
  background: transparent;
  resize: vertical;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/* Remove default styling from select */
select {
  /* border: none; */
  outline: none;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
}
/* Remove default button styling */
button {
  /* border: none;
  outline: none; */
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/* Remove default styling from file inputs */
input[type='file'] {
  /* border: none; */
  outline: none;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/* Remove default styling from range inputs */
input[type='range'] {
  /* border: none; */
  outline: none;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/* Remove default styling from color inputs */
input[type='color'] {
  /* border: none; */
  outline: none;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* =========================== */
/* FORM ELEMENTS RESET         */
/* =========================== */
/* Additional form element resets */
button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  -moz-appearance: button;
       appearance: button;
}
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
  outline: 1px dotted ButtonText;
}
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}
progress {
  vertical-align: baseline;
}
/* textarea overflow handled above */
[type='checkbox'],
[type='radio'] {
  box-sizing: border-box;
  padding: 0;
}
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}
[type='search'] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
       appearance: textfield;
  outline-offset: -2px;
}
[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  appearance: button;
  font: inherit;
}
/* =========================== */
/* TABLE RESET                 */
/* =========================== */
/* Reset tables */
table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
/* thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
} */
/* th,
td {
  padding: 0;
  text-align: left;
  vertical-align: top;
} */
/* th {
  font-weight: 600;
} */
/* =========================== */
/* MISCELLANEOUS RESET         */
/* =========================== */
/* Reset pagination and navigation */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/* Reset code elements */
code,
kbd,
samp {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas,
    'Courier New', monospace;
  font-size: 1em;
}
/* Reset abbreviation */
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/* Reset mark */
mark {
  background-color: var(--ina-background-tertiary);
  color: var(--ina-black);
}
/* Reset del and ins */
del {
  text-decoration: line-through;
}
ins {
  text-decoration: underline;
}
/* Reset dfn */
dfn {
  font-style: italic;
}
