@idds/styles 1.2.10 → 1.2.12

package/dist/base.css

@@ -0,0 +1,1071 @@
+
+@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: #ebf3ff;
+  --ina-blue-200: #d2e4fe;
+  --ina-blue-300: #84b4fb;
+  --ina-blue-400: #4d93fc;
+  --ina-blue-500: #0968f6;
+  --ina-blue-600: #004ab8;
+  --ina-blue-700: #002a69;
+  --ina-blue-800: #0a2142;
+  --ina-blue-900: #031530;
+
+  /* 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: #fafffb;
+  --ina-green-100: #ebffef;
+  --ina-green-200: #d2fedb;
+  --ina-green-300: #83fc9b;
+  --ina-green-400: #51fb73;
+  --ina-green-500: #09f638;
+  --ina-green-600: #00b925;
+  --ina-green-700: #006b15;
+  --ina-green-800: #0a4215;
+  --ina-green-900: #03300c;
+
+  /* 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: #fffdeb;
+  --ina-yellow-200: #fef9d2;
+  --ina-yellow-300: #fcee83;
+  --ina-yellow-400: #fbe751;
+  --ina-yellow-500: #f6da09;
+  --ina-yellow-600: #b9a300;
+  --ina-yellow-700: #6b5f00;
+  --ina-yellow-800: #423c0a;
+  --ina-yellow-900: #302b03;
+
+  /* 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: #ffebeb;
+  --ina-red-200: #fed2d2;
+  --ina-red-300: #fb8383;
+  --ina-red-400: #fc4f4f;
+  --ina-red-500: #f60909;
+  --ina-red-600: #b80000;
+  --ina-red-700: #6b0000;
+  --ina-red-800: #420a0a;
+  --ina-red-900: #300303;
+
+  /* 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-1: 0.25rem; /* 4px */
+  --ina-spacing-2: 0.5rem; /* 8px */
+  --ina-spacing-3: 0.75rem; /* 12px */
+  --ina-spacing-3-5: 0.875rem; /* 14px */
+  --ina-spacing-4: 1rem; /* 16px */
+  --ina-spacing-5: 1.25rem; /* 20px */
+  --ina-spacing-6: 1.5rem; /* 24px */
+  --ina-spacing-8: 2rem; /* 32px */
+  --ina-spacing-10: 2.5rem; /* 40px */
+  --ina-spacing-12: 3rem; /* 48px */
+  --ina-spacing-16: 4rem; /* 64px */
+  --ina-spacing-20: 5rem; /* 80px */
+  --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;
+}
+/* PAN-RB Theme*/
+[data-brand='pan-rb'] {
+  /* 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-600);
+  --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-orange-50);
+  --ina-warning-100: var(--ina-orange-100);
+  --ina-warning-200: var(--ina-orange-200);
+  --ina-warning-300: var(--ina-orange-300);
+  --ina-warning-400: var(--ina-orange-400);
+  --ina-warning-500: var(--ina-orange-500);
+  --ina-warning-600: var(--ina-orange-600);
+  --ina-warning-700: var(--ina-orange-700);
+  --ina-warning-800: var(--ina-orange-800);
+  --ina-warning-900: var(--ina-orange-900);
+  --ina-sentiment-warning-50: var(--ina-orange-50);
+  --ina-sentiment-warning-100: var(--ina-orange-100);
+  --ina-sentiment-warning-200: var(--ina-orange-200);
+  --ina-sentiment-warning-300: var(--ina-orange-300);
+  --ina-sentiment-warning-400: var(--ina-orange-400);
+  --ina-sentiment-warning-500: var(--ina-orange-500);
+  --ina-sentiment-warning-600: var(--ina-orange-600);
+  --ina-sentiment-warning-700: var(--ina-orange-700);
+  --ina-sentiment-warning-800: var(--ina-orange-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-400);
+
+  /* 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-orange-50);
+  --ina-warning-100: var(--ina-orange-100);
+  --ina-warning-200: var(--ina-orange-200);
+  --ina-warning-300: var(--ina-orange-300);
+  --ina-warning-400: var(--ina-orange-400);
+  --ina-warning-500: var(--ina-orange-500);
+  --ina-warning-600: var(--ina-orange-600);
+  --ina-warning-700: var(--ina-orange-700);
+  --ina-warning-800: var(--ina-orange-800);
+  --ina-warning-900: var(--ina-orange-900);
+  --ina-sentiment-warning-50: var(--ina-orange-50);
+  --ina-sentiment-warning-100: var(--ina-orange-100);
+  --ina-sentiment-warning-200: var(--ina-orange-200);
+  --ina-sentiment-warning-300: var(--ina-orange-300);
+  --ina-sentiment-warning-400: var(--ina-orange-400);
+  --ina-sentiment-warning-500: var(--ina-orange-500);
+  --ina-sentiment-warning-600: var(--ina-orange-600);
+  --ina-sentiment-warning-700: var(--ina-orange-700);
+  --ina-sentiment-warning-800: var(--ina-orange-800);
+  --ina-sentiment-warning-900: var(--ina-orange-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 default styling from checkbox and radio */
+/* input[type='checkbox'],
+input[type='radio'] {
+  border: none;
+  outline: none;
+  background: transparent;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  box-shadow: none;
+} */
+/* Remove default styling from submit and reset buttons */
+/* input[type='submit'],
+input[type='reset'],
+input[type='button'] {
+  border: none;
+  outline: none;
+  background: transparent;
+  cursor: pointer;
+  -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 */
+optgroup {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+}
+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;
+}
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+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;
+}
+/* =========================== */
+/* MEDIA ELEMENTS RESET        */
+/* =========================== */
+/* Reset media elements */
+/* img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  max-width: 100%;
+} */
+/* =========================== */
+/* 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 */
+nav {
+  display: block;
+}
+/* Reset semantic elements */
+section,
+article,
+aside,
+header,
+footer,
+main,
+figure,
+address,
+cite,
+mark,
+small,
+sub,
+sup,
+code,
+kbd,
+samp,
+abbr,
+del,
+ins,
+dfn {
+  display: block;
+}
+/* Reset text elements */
+small {
+  font-size: 80%;
+}
+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: #ff0;
+  color: #000;
+}
+/* Reset del and ins */
+del {
+  text-decoration: line-through;
+}
+ins {
+  text-decoration: underline;
+}
+/* Reset dfn */
+dfn {
+  font-style: italic;
+}