@ilo-org/styles 1.17.0 → 1.17.1

package/css/components/datepicker.css

@@ -1 +1 @@
-.ilo--datepicker{cursor:pointer}.ilo--datepicker::-webkit-calendar-picker-indicator{cursor:pointer}.ilo--input.ilo--datepicker{line-height:1;padding:calc(var(--ilo-spacing-base)*3) calc(var(--ilo-spacing-base)*4) calc(var(--ilo-spacing-base)*3)}
+.ilo--datepicker{color-scheme:light;cursor:pointer}.ilo--datepicker::-webkit-calendar-picker-indicator{cursor:pointer}.ilo--input.ilo--datepicker{line-height:1;padding:calc(var(--ilo-spacing-base)*3) calc(var(--ilo-spacing-base)*4) calc(var(--ilo-spacing-base)*3)}

package/css/global.css.map

@@ -1 +1 @@
-{"version":3,"sources":["_reset.scss","theme/_typography.scss","theme/_foundation.scss","_typography.scss"],"names":[],"mappings":"iBAMA,EAAA,QAAA,SAGE,WAAA,WAGF,QAAA,WAAA,KAAA,GAAA,SAAA,OAAA,KAAA,OAAA,OAAA,GAAA,OAAA,EAAA,IAAA,MAAA,GAeE,OAAA,EACA,QAAA,EACA,OAAA,EAGF,GAAA,GAAA,GAAA,GAAA,GAAA,GAME,OAAA,EACA,UAAA,QACA,YAAA,QAGF,QAAA,MAAA,QAAA,WAAA,OAAA,OAAA,OAAA,OAAA,KAAA,IAAA,QAWE,QAAA,MAGF,KACE,YAAA,EAGF,GACE,WAAA,KAGF,MACE,aAAA,QACA,gBAAA,SACA,eAAA,EAGF,GAAA,GAEE,eAAA,IACA,QAAA,EAGF,GACE,WAAA,KACA,YAAA,IAGF,OAAA,MAAA,SAAA,OAAA,SAKE,mBAAA,KACA,WAAA,KACA,eAAA,OACA,MAAA,QACA,KAAA,QACA,WAAA,IACA,QAAA,EACA,OAAA,EACA,cAAA,EACA,WAAA,QACA,eAAA,QAGF,GACE,WAAA,YACA,OAAA,EACA,SAAA,QACA,iBAAA,IACA,OAAA,EACA,MAAA,KACA,MAAA,QAGF,SACE,SAAA,KAGF,OACE,mBAAA,KACA,gBAAA,KAKF,6CACE,IACE,KAAA,YCzHJ,MAEE,oBAAA,QAAA,CAAA,KAAA,IAAA,CAAA,WACA,uBAAA,SAAA,CAAA,WACA,uBAAA,SAAA,EAAA,CAAA,UAAA,KAAA,CAAA,IAAA,CAAA,WACA,uBAAA,KAAA,KAAA,IAAA,EAAA,CAAA,GAAA,MAAA,CAAA,SAAA,IAAA,CAAA,YAAA,CAAA,WAIA,iBAAA,KAAA,IAAA,CAAA,WACA,oBAAA,SAAA,CAAA,WACA,oBAAA,SAAA,EAAA,CAAA,UAAA,KAAA,CAAA,IAAA,CAAA,WACA,oBAAA,KAAA,KAAA,IAAA,EAAA,CAAA,GAAA,MAAA,CAAA,SAAA,IAAA,CAAA,YAAA,CAAA,WAGA,sBAAA,UACA,kBAAA,KAGA,qBAAA,QACA,qBAAA,gBACA,oBAAA,gBACA,mBAAA,gBACA,mBAAA,gBACA,mBAAA,gBACA,oBAAA,gBACA,qBAAA,gBACA,qBAAA,gBACA,qBAAA,gBACA,qBAAA,gBAGA,wBAAA,IACA,0BAAA,IACA,yBAAA,IACA,uBAAA,IAGA,uBAAA,QACA,sBAAA,KACA,qBAAA,IACA,qBAAA,KACA,qBAAA,IACA,sBAAA,KACA,uBAAA,KACA,uBAAA,IAGA,yBAAA,MACA,wBAAA,IACA,wBAAA,EACA,wBAAA,GCjDF,MACE,YAAA,EAKA,uBAAA,gBACA,qBAAA,gBAaA,kBAAA,gCACA,iBAAA,2BACA,yBAAA,2BACA,uBAAA,2BACA,sBAAA,2BACA,wBAAA,uBACA,sBAAA,2BACA,2BAAA,uCACA,0BAAA,gCACA,4BAAA,8BACA,uBAAA,8BACA,wCAAA,0BACA,sBAAA,8BACA,gBAAA,yBACA,sBAAA,yBACA,qBAAA,yBACA,qBAAA,qCACA,mBAAA,4BACA,yBAAA,4BACA,wBAAA,wCACA,kBAAA,2BACA,wBAAA,2BACA,uBAAA,uCACA,sBAAA,+BACA,mBAAA,4BAOA,sBAAA,mBACA,kCAAA,qBACA,sBAAA,qBACA,sBAAA,qBACA,kCAAA,uBACA,sBAAA,sBACA,sBAAA,sBACA,sBAAA,uBACA,sBAAA,uBACA,sBAAA,uBAGA,2BAAA,oBACA,yBAAA,uBACA,yBAAA,uBACA,yBAAA,uBACA,2BAAA,uBAGA,oBAAA,qBACA,oBAAA,qBACA,oBAAA,qBACA,oBAAA,qBACA,gCAAA,uBACA,oBAAA,sBACA,oBAAA,uBACA,oBAAA,uBACA,oBAAA,uBAGA,uBAAA,qBACA,uBAAA,qBACA,uBAAA,sBACA,uBAAA,sBACA,uBAAA,sBACA,mCAAA,wBACA,uBAAA,uBACA,uBAAA,uBACA,uBAAA,uBAGA,sBAAA,mBACA,sBAAA,oBACA,sBAAA,qBACA,sBAAA,sBACA,sBAAA,uBACA,kCAAA,yBACA,sBAAA,uBACA,sBAAA,uBACA,sBAAA,uBAGA,0BAAA,mBACA,0BAAA,qBACA,0BAAA,qBACA,0BAAA,qBACA,0BAAA,uBACA,0BAAA,uBACA,0BAAA,uBACA,0BAAA,uBAGA,uBAAA,mBACA,uBAAA,qBACA,uBAAA,qBACA,uBAAA,sBACA,uBAAA,uBACA,uBAAA,uBACA,uBAAA,uBACA,uBAAA,uBAOA,+BAAA,gCACA,8BAAA,8BACA,6BAAA,2BACA,8BAAA,4BACA,+BAAA,gCAGA,iCAAA,2BACA,+BAAA,2BACA,kCAAA,2BACA,iCAAA,gCAGA,+BAAA,gCACA,8BAAA,8BACA,6BAAA,2BACA,gCAAA,8BACA,8BAAA,4BACA,+BAAA,gCAGA,iCAAA,8BACA,gCAAA,8BACA,+BAAA,2BACA,iCAAA,2BACA,iCAAA,2BACA,iCAAA,4BACA,+BAAA,4BACA,iCAAA,gCAGA,uCAAA,gCACA,sCAAA,2BACA,qCAAA,2BACA,wCAAA,8BACA,wCAAA,8BACA,8CAAA,8BACA,uCAAA,gCACA,sCAAA,4BAGA,kCAAA,gCACA,iCAAA,2BAGA,sCAAA,yBACA,yCAAA,yBACA,uCAAA,yBACA,2CAAA,4BACA,yCAAA,4BACA,2CAAA,2BACA,yCAAA,2BACA,wCAAA,2BACA,sCAAA,2BAGA,oCAAA,+BACA,iCAAA,4BACA,gCAAA,2BACA,iCAAA,4BACA,yCAAA,2BAOA,8BAAA,gCACA,6BAAA,8BACA,4BAAA,2BACA,6BAAA,4BACA,8BAAA,2BAGA,gCAAA,2BACA,8BAAA,2BACA,iCAAA,2BACA,gCAAA,2BAGA,8BAAA,gCACA,6BAAA,8BACA,4BAAA,2BACA,+BAAA,8BACA,6BAAA,4BACA,8BAAA,2BAGA,gCAAA,gCACA,+BAAA,8BACA,8BAAA,2BACA,gCAAA,2BACA,gCAAA,2BACA,gCAAA,4BACA,8BAAA,4BACA,gCAAA,2BAGA,sCAAA,2BACA,qCAAA,2BACA,oCAAA,2BACA,uCAAA,gCACA,uCAAA,8BACA,6CAAA,8BACA,sCAAA,gCAGA,iCAAA,2BACA,gCAAA,gCAGA,qCAAA,yBACA,wCAAA,yBACA,sCAAA,yBACA,0CAAA,4BACA,wCAAA,4BACA,0CAAA,2BACA,wCAAA,2BACA,uCAAA,2BACA,qCAAA,2BAGA,mCAAA,+BACA,gCAAA,4BACA,+BAAA,2BACA,gCAAA,4BACA,wCAAA,2BAKA,oCAAA,yBACA,mCAAA,2BACA,sCAAA,2BACA,sCAAA,4BACA,+BAAA,gCACA,8BAAA,2BACA,iCAAA,8BACA,6BAAA,2BACA,6BAAA,gCAEA,4BAAA,8BACA,0BAAA,2BACA,2BAAA,2BACA,0BAAA,4BAKA,oBAAA,MACA,oBAAA,MACA,oBAAA,MACA,oBAAA,OACA,oBAAA,OACA,qBAAA,OACA,oBAAA,yCAKA,qBAAA,yCACA,oBAAA,yCACA,mBAAA,yCACA,mBAAA,wCACA,mBAAA,yCACA,oBAAA,yCACA,qBAAA,yCACA,qBAAA,yCACA,qBAAA,yCACA,qBAAA,yCAKA,0BAAA,IACA,yBAAA,IACA,uBAAA,IAKA,sBAAA,KACA,qBAAA,KACA,qBAAA,KACA,qBAAA,KACA,sBAAA,KACA,uBAAA,KACA,uBAAA,KAKA,yBAAA,SACA,wBAAA,QACA,wBAAA,IACA,wBAAA,OAKA,mBAAA,yCAKA,0BAAA,MACA,iCAAA,SAKA,gBAAA,yCACA,gBAAA,yCACA,gBAAA,yCACA,gBAAA,yCAKA,+BAAA,2BACA,8BAAA,gCAEA,+BAAA,4BACA,8BAAA,8BAEA,6BAAA,2BACA,4BAAA,2BAEA,8BAAA,2BACA,6BAAA,2BAEA,6BAAA,2BACA,4BAAA,2BAEA,oCAAA,YACA,mCAAA,YAEA,kCAAA,YACA,iCAAA,gCAEA,kCAAA,4BACA,iCAAA,4BCnXF,gBAAA,WAEE,oBAAA,4BACA,iBAAA,yBAIA,yBAAA,EACA,wBAAA,EACA,wBAAA,EACA,wBAAA,EAIF,gBAAA,WAEE,oBAAA,4BACA,iBAAA,yBAIF,gBAAA,WAEE,oBAAA,4BACA,iBAAA,yBAGF,KAAA,KAEE,MAAA,oCACA,YAAA,sBACA,UAAA,0BACA,YAAA,4BACA,eAAA,OACA,uBAAA,YAGF,GAAA,GAAA,GAAA,GAAA,GAME,YAAA","file":"global.css","sourcesContent":["/**\n* This file is an opinionated reset that is based on https://nicolas-cusan.github.io/destyle.css/\n* it aims to provide a clean layer for styling, the reset should be used with normalize.css in order to create\n* a normalized base\n**/\n\n*,\n::before,\n::after {\n  box-sizing: border-box;\n}\n\nbody,\np,\ntable,\nblockquote,\naddress,\npre,\niframe,\nform,\nfigure,\ndl,\nul,\nol,\nfieldset,\noption,\nlegend {\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  margin: 0;\n  font-size: inherit;\n  font-weight: inherit;\n}\n\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\nsection {\n  display: block;\n}\n\nbody {\n  line-height: 1;\n}\n\nul {\n  list-style: none;\n}\n\ntable {\n  border-color: inherit;\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\ntd,\nth {\n  vertical-align: top;\n  padding: 0;\n}\n\nth {\n  text-align: left;\n  font-weight: bold;\n}\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  -webkit-appearance: none;\n  appearance: none;\n  vertical-align: middle;\n  color: inherit;\n  font: inherit;\n  background: transparent;\n  padding: 0;\n  margin: 0;\n  border-radius: 0;\n  text-align: inherit;\n  text-transform: inherit;\n}\n\nhr {\n  box-sizing: content-box;\n  height: 0;\n  overflow: visible;\n  border-top-width: 1px;\n  margin: 0;\n  clear: both;\n  color: inherit;\n}\n\ntextarea {\n  overflow: auto;\n}\n\nselect {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n\n/// Makes SVGs accessible in high contrast mode\n/// @link https://github.com/IBM/carbon-elements/issues/345#issuecomment-466577293 Carbon-elements #345\n@media screen and (-ms-high-contrast: active) {\n  svg {\n    fill: ButtonText;\n  }\n}\n","@use \"../config\" as *;\n\n:root {\n  // Display Font Families\n  --ilo-fonts-display: Overpass, Noto Sans, sans-serif;\n  --ilo-fonts-display-ar: Vazirmatn, sans-serif;\n  --ilo-fonts-display-zh: PingFang SC, Microsoft YaHei, 微软雅黑, sans-serif;\n  --ilo-fonts-display-jp: Noto Sans CJK JP, Yu Gothic, Hiragino Sans,\n    TakaoPGothic, sans-serif;\n\n  // Copy font families\n  --ilo-fonts-copy: Noto Sans, sans-serif;\n  --ilo-fonts-copy-ar: Vazirmatn, sans-serif;\n  --ilo-fonts-copy-zh: PingFang SC, Microsoft YaHei, 微软雅黑, sans-serif;\n  --ilo-fonts-copy-jp: Noto Sans CJK JP, Yu Gothic, Hiragino Sans, TakaoPGothic,\n    sans-serif;\n\n  --ilo-fonts-monospace: monospace;\n  --ilo-line-height: 1.46;\n\n  // Font Sizes\n  --ilo-font-size-base: #{$base-font-size};\n  --ilo-font-size-2xsm: px-to-rem(10px);\n  --ilo-font-size-xsm: px-to-rem(12px);\n  --ilo-font-size-sm: px-to-rem(14px);\n  --ilo-font-size-md: px-to-rem(16px);\n  --ilo-font-size-lg: px-to-rem(18px);\n  --ilo-font-size-xlg: px-to-rem(24px);\n  --ilo-font-size-2xlg: px-to-rem(28px);\n  --ilo-font-size-3xlg: px-to-rem(32px);\n  --ilo-font-size-4xlg: px-to-rem(36px);\n  --ilo-font-size-5xlg: px-to-rem(44px);\n\n  // Font Weight\n  --ilo-font-weight-light: 300;\n  --ilo-font-weight-regular: 400;\n  --ilo-font-weight-medium: 500;\n  --ilo-font-weight-bold: 700;\n\n  // Line Height\n  --ilo-line-height-base: 27.24px;\n  --ilo-line-height-xsm: 1.15;\n  --ilo-line-height-sm: 1.2;\n  --ilo-line-height-md: 1.25;\n  --ilo-line-height-lg: 1.3;\n  --ilo-line-height-xlg: 1.35;\n  --ilo-line-height-2xlg: 1.45;\n  --ilo-line-height-3xlg: 1.5;\n\n  // Letter Spacing\n  --ilo-letter-spacing-xsm: -3.5%;\n  --ilo-letter-spacing-sm: -2%;\n  --ilo-letter-spacing-md: 0;\n  --ilo-letter-spacing-lg: 2%;\n}\n","@use \"../functions\" as *;\n@use \"./breakpoints\" as *;\n@use \"./typography\" as *;\n\n:root {\n  --ilo-scale: 1; // default scale for the design system\n\n  /**\n    * Layout\n  */\n  --ilo-layout-max-width: #{px-to-rem(1300px)};\n  --ilo-layout-padding: #{px-to-rem(20px)};\n\n  /**\n    * Legacy Colors (aliases pointing to new global colors)\n    *\n    * @deprecated Use the Light/Dark Semantic Colors below — they name the role a\n    * colour plays (Text, Action, Icon, Border, Container Background, Page\n    * Background, Supportive Feedback, Generic) rather than the colour itself.\n    * These aliases are kept for backwards compatibility with downstream consumers\n    * only. Nothing inside this repo references them any more — not the component\n    * styles, not the Twig templates, not the React components, not Storybook — so\n    * the whole block can be deleted in the next major of @ilo-org/styles.\n    */\n  --ilo-color-white: var(--ilo-color-neutrals-white);\n  --ilo-color-blue: var(--ilo-color-brand-600);\n  --ilo-color-blue-lighter: var(--ilo-color-brand-100);\n  --ilo-color-blue-light: var(--ilo-color-brand-200);\n  --ilo-color-blue-dark: var(--ilo-color-brand-800);\n  --ilo-color-blue-medium: rgba(210, 213, 242, 1);\n  --ilo-color-blue-ramp: var(--ilo-color-brand-700);\n  --ilo-color-blue-dark-ramp: var(--ilo-color-brand-800-transparent);\n  --ilo-color-gray-charcoal: var(--ilo-color-neutrals-black);\n  --ilo-color-gray-accessible: var(--ilo-color-neutrals-700);\n  --ilo-color-gray-light: var(--ilo-color-neutrals-200);\n  --ilo-color-gray-light-semi-transparent: rgba(237, 240, 242, 0.25);\n  --ilo-color-gray-base: var(--ilo-color-neutrals-500);\n  --ilo-color-red: var(--ilo-color-red-500);\n  --ilo-color-red-light: var(--ilo-color-red-100);\n  --ilo-color-red-dark: var(--ilo-color-red-600);\n  --ilo-color-red-ramp: var(--ilo-color-red-500-transparent);\n  --ilo-color-yellow: var(--ilo-color-yellow-400);\n  --ilo-color-yellow-light: var(--ilo-color-yellow-100);\n  --ilo-color-yellow-ramp: var(--ilo-color-yellow-400-transparent);\n  --ilo-color-green: var(--ilo-color-green-400);\n  --ilo-color-green-light: var(--ilo-color-green-100);\n  --ilo-color-green-ramp: var(--ilo-color-green-400-transparent);\n  --ilo-color-turquoise: var(--ilo-color-turquoise-500);\n  --ilo-color-purple: var(--ilo-color-purple-600);\n\n  /**\n    * New Global Colors\n    */\n\n  // Brand\n  --ilo-color-brand-800: rgba(35, 0, 80, 1);\n  --ilo-color-brand-800-transparent: rgba(35, 0, 80, 0.5);\n  --ilo-color-brand-700: rgba(21, 31, 133, 1);\n  --ilo-color-brand-600: rgba(30, 45, 190, 1);\n  --ilo-color-brand-600-transparent: rgba(30, 45, 190, 0.4);\n  --ilo-color-brand-500: rgba(50, 100, 200, 1);\n  --ilo-color-brand-400: rgba(90, 135, 205, 1);\n  --ilo-color-brand-300: rgba(130, 175, 220, 1);\n  --ilo-color-brand-200: rgba(190, 220, 250, 1);\n  --ilo-color-brand-100: rgba(235, 245, 253, 1);\n\n  // Neutrals\n  --ilo-color-neutrals-black: rgba(45, 45, 45, 1);\n  --ilo-color-neutrals-700: rgba(109, 109, 109, 1);\n  --ilo-color-neutrals-500: rgba(184, 196, 204, 1);\n  --ilo-color-neutrals-200: rgba(237, 240, 242, 1);\n  --ilo-color-neutrals-white: rgba(255, 255, 255, 1);\n\n  // Red\n  --ilo-color-red-800: rgba(125, 18, 26, 1);\n  --ilo-color-red-700: rgba(150, 36, 45, 1);\n  --ilo-color-red-600: rgba(200, 48, 60, 1);\n  --ilo-color-red-500: rgba(250, 60, 75, 1);\n  --ilo-color-red-500-transparent: rgba(250, 60, 75, 0.2);\n  --ilo-color-red-400: rgba(251, 99, 111, 1);\n  --ilo-color-red-300: rgba(252, 138, 147, 1);\n  --ilo-color-red-200: rgba(253, 177, 183, 1);\n  --ilo-color-red-100: rgba(254, 216, 219, 1);\n\n  // Yellow\n  --ilo-color-yellow-800: rgba(165, 104, 3, 1);\n  --ilo-color-yellow-700: rgba(215, 135, 0, 1);\n  --ilo-color-yellow-600: rgba(228, 148, 40, 1);\n  --ilo-color-yellow-500: rgba(250, 180, 40, 1);\n  --ilo-color-yellow-400: rgba(255, 205, 45, 1);\n  --ilo-color-yellow-400-transparent: rgba(255, 205, 45, 0.2);\n  --ilo-color-yellow-300: rgba(255, 220, 108, 1);\n  --ilo-color-yellow-200: rgba(255, 235, 171, 1);\n  --ilo-color-yellow-100: rgba(255, 245, 200, 1);\n\n  // Green\n  --ilo-color-green-800: rgba(21, 66, 0, 1);\n  --ilo-color-green-700: rgba(56, 90, 40, 1);\n  --ilo-color-green-600: rgba(84, 135, 60, 1);\n  --ilo-color-green-500: rgba(112, 180, 80, 1);\n  --ilo-color-green-400: rgba(140, 225, 100, 1);\n  --ilo-color-green-400-transparent: rgba(140, 225, 100, 0.2);\n  --ilo-color-green-300: rgba(175, 234, 147, 1);\n  --ilo-color-green-200: rgba(209, 243, 193, 1);\n  --ilo-color-green-100: rgba(232, 249, 224, 1);\n\n  // Turquoise\n  --ilo-color-turquoise-800: rgba(2, 84, 84, 1);\n  --ilo-color-turquoise-700: rgba(4, 147, 147, 1);\n  --ilo-color-turquoise-600: rgba(5, 189, 189, 1);\n  --ilo-color-turquoise-500: rgba(5, 210, 210, 1);\n  --ilo-color-turquoise-400: rgba(105, 228, 228, 1);\n  --ilo-color-turquoise-300: rgba(158, 242, 242, 1);\n  --ilo-color-turquoise-200: rgba(180, 250, 247, 1);\n  --ilo-color-turquoise-100: rgba(210, 251, 251, 1);\n\n  // Purple\n  --ilo-color-purple-800: rgba(95, 0, 55, 1);\n  --ilo-color-purple-700: rgba(119, 20, 73, 1);\n  --ilo-color-purple-600: rgba(150, 10, 85, 1);\n  --ilo-color-purple-500: rgba(171, 59, 119, 1);\n  --ilo-color-purple-400: rgba(203, 133, 170, 1);\n  --ilo-color-purple-300: rgba(224, 182, 204, 1);\n  --ilo-color-purple-200: rgba(240, 210, 224, 1);\n  --ilo-color-purple-100: rgba(245, 231, 238, 1);\n\n  /**\n    * Light Semantic Colors\n    */\n\n  // Text\n  --ilo-color-light-text-default: var(--ilo-color-neutrals-black);\n  --ilo-color-light-text-subtle: var(--ilo-color-neutrals-700);\n  --ilo-color-light-text-brand: var(--ilo-color-brand-800);\n  --ilo-color-light-text-accent: var(--ilo-color-purple-600);\n  --ilo-color-light-text-inverse: var(--ilo-color-neutrals-white);\n\n  // Action\n  --ilo-color-light-action-default: var(--ilo-color-brand-800);\n  --ilo-color-light-action-hover: var(--ilo-color-brand-600);\n  --ilo-color-light-action-selected: var(--ilo-color-brand-600);\n  --ilo-color-light-action-inverse: var(--ilo-color-neutrals-white);\n\n  // Icon\n  --ilo-color-light-icon-default: var(--ilo-color-neutrals-black);\n  --ilo-color-light-icon-subtle: var(--ilo-color-neutrals-500);\n  --ilo-color-light-icon-brand: var(--ilo-color-brand-800);\n  --ilo-color-light-icon-disabled: var(--ilo-color-neutrals-200);\n  --ilo-color-light-icon-accent: var(--ilo-color-purple-600);\n  --ilo-color-light-icon-inverse: var(--ilo-color-neutrals-white);\n\n  // Border\n  --ilo-color-light-border-default: var(--ilo-color-neutrals-500);\n  --ilo-color-light-border-subtle: var(--ilo-color-neutrals-200);\n  --ilo-color-light-border-brand: var(--ilo-color-brand-600);\n  --ilo-color-light-border-brand-2: var(--ilo-color-brand-200);\n  --ilo-color-light-border-brand-3: var(--ilo-color-brand-800);\n  --ilo-color-light-border-brand-4: var(--ilo-color-purple-600);\n  --ilo-color-light-border-focus: var(--ilo-color-yellow-400);\n  --ilo-color-light-border-inverse: var(--ilo-color-neutrals-white);\n\n  // Container Background\n  --ilo-color-light-container-bg-default: var(--ilo-color-neutrals-white);\n  --ilo-color-light-container-bg-subtle: var(--ilo-color-brand-100);\n  --ilo-color-light-container-bg-brand: var(--ilo-color-brand-800);\n  --ilo-color-light-container-bg-disabled: var(--ilo-color-neutrals-200);\n  --ilo-color-light-container-bg-inactive: var(--ilo-color-neutrals-500);\n  --ilo-color-light-container-bg-inverse-subtle: var(--ilo-color-neutrals-700);\n  --ilo-color-light-container-bg-inverse: var(--ilo-color-neutrals-black);\n  --ilo-color-light-container-bg-accent: var(--ilo-color-yellow-400);\n\n  // Page Background\n  --ilo-color-light-page-bg-default: var(--ilo-color-neutrals-white);\n  --ilo-color-light-page-bg-subtle: var(--ilo-color-brand-100);\n\n  // Supportive Feedback\n  --ilo-color-light-feedback-error-dark: var(--ilo-color-red-600);\n  --ilo-color-light-feedback-error-default: var(--ilo-color-red-500);\n  --ilo-color-light-feedback-error-light: var(--ilo-color-red-100);\n  --ilo-color-light-feedback-warning-default: var(--ilo-color-yellow-400);\n  --ilo-color-light-feedback-warning-light: var(--ilo-color-yellow-100);\n  --ilo-color-light-feedback-success-default: var(--ilo-color-green-400);\n  --ilo-color-light-feedback-success-light: var(--ilo-color-green-100);\n  --ilo-color-light-feedback-info-default: var(--ilo-color-brand-600);\n  --ilo-color-light-feedback-info-light: var(--ilo-color-brand-200);\n\n  // Generic\n  --ilo-color-light-generic-turquoise: var(--ilo-color-turquoise-500);\n  --ilo-color-light-generic-purple: var(--ilo-color-purple-600);\n  --ilo-color-light-generic-green: var(--ilo-color-green-400);\n  --ilo-color-light-generic-yellow: var(--ilo-color-yellow-400);\n  --ilo-color-light-generic-ilo-light-blue: var(--ilo-color-brand-100);\n\n  /**\n    * Dark Semantic Colors\n    */\n\n  // Text\n  --ilo-color-dark-text-default: var(--ilo-color-neutrals-white);\n  --ilo-color-dark-text-subtle: var(--ilo-color-neutrals-200);\n  --ilo-color-dark-text-brand: var(--ilo-color-brand-200);\n  --ilo-color-dark-text-accent: var(--ilo-color-yellow-400);\n  --ilo-color-dark-text-inverse: var(--ilo-color-brand-800);\n\n  // Action\n  --ilo-color-dark-action-default: var(--ilo-color-brand-100);\n  --ilo-color-dark-action-hover: var(--ilo-color-brand-200);\n  --ilo-color-dark-action-selected: var(--ilo-color-brand-600);\n  --ilo-color-dark-action-inverse: var(--ilo-color-brand-800);\n\n  // Icon\n  --ilo-color-dark-icon-default: var(--ilo-color-neutrals-white);\n  --ilo-color-dark-icon-subtle: var(--ilo-color-neutrals-700);\n  --ilo-color-dark-icon-brand: var(--ilo-color-brand-200);\n  --ilo-color-dark-icon-disabled: var(--ilo-color-neutrals-700);\n  --ilo-color-dark-icon-accent: var(--ilo-color-yellow-400);\n  --ilo-color-dark-icon-inverse: var(--ilo-color-brand-800);\n\n  // Border\n  --ilo-color-dark-border-default: var(--ilo-color-neutrals-white);\n  --ilo-color-dark-border-subtle: var(--ilo-color-neutrals-700);\n  --ilo-color-dark-border-brand: var(--ilo-color-brand-200);\n  --ilo-color-dark-border-brand-2: var(--ilo-color-brand-800);\n  --ilo-color-dark-border-brand-3: var(--ilo-color-brand-100);\n  --ilo-color-dark-border-brand-4: var(--ilo-color-yellow-400);\n  --ilo-color-dark-border-focus: var(--ilo-color-yellow-400);\n  --ilo-color-dark-border-inverse: var(--ilo-color-brand-800);\n\n  // Container Background\n  --ilo-color-dark-container-bg-default: var(--ilo-color-brand-800);\n  --ilo-color-dark-container-bg-subtle: var(--ilo-color-brand-600);\n  --ilo-color-dark-container-bg-brand: var(--ilo-color-brand-100);\n  --ilo-color-dark-container-bg-disabled: var(--ilo-color-neutrals-black);\n  --ilo-color-dark-container-bg-inactive: var(--ilo-color-neutrals-700);\n  --ilo-color-dark-container-bg-inverse-subtle: var(--ilo-color-neutrals-200);\n  --ilo-color-dark-container-bg-inverse: var(--ilo-color-neutrals-white);\n\n  // Page Background\n  --ilo-color-dark-page-bg-default: var(--ilo-color-brand-800);\n  --ilo-color-dark-page-bg-subtle: var(--ilo-color-neutrals-black);\n\n  // Supportive Feedback\n  --ilo-color-dark-feedback-error-dark: var(--ilo-color-red-100);\n  --ilo-color-dark-feedback-error-default: var(--ilo-color-red-500);\n  --ilo-color-dark-feedback-error-light: var(--ilo-color-red-600);\n  --ilo-color-dark-feedback-warning-default: var(--ilo-color-yellow-400);\n  --ilo-color-dark-feedback-warning-light: var(--ilo-color-yellow-800);\n  --ilo-color-dark-feedback-success-default: var(--ilo-color-green-400);\n  --ilo-color-dark-feedback-success-light: var(--ilo-color-green-800);\n  --ilo-color-dark-feedback-info-default: var(--ilo-color-brand-600);\n  --ilo-color-dark-feedback-info-light: var(--ilo-color-brand-800);\n\n  // Generic\n  --ilo-color-dark-generic-turquoise: var(--ilo-color-turquoise-500);\n  --ilo-color-dark-generic-purple: var(--ilo-color-purple-600);\n  --ilo-color-dark-generic-green: var(--ilo-color-green-400);\n  --ilo-color-dark-generic-yellow: var(--ilo-color-yellow-400);\n  --ilo-color-dark-generic-ilo-light-blue: var(--ilo-color-brand-200);\n\n  /**\n    * Legacy Semantic Aliases (preserved for backwards compatibility)\n    */\n  --ilo-color-notification-type-error: var(--ilo-color-red-500);\n  --ilo-color-notification-type-info: var(--ilo-color-brand-600);\n  --ilo-color-notification-type-success: var(--ilo-color-green-400);\n  --ilo-color-notification-type-warning: var(--ilo-color-yellow-400);\n  --ilo-color-background-default: var(--ilo-color-neutrals-white);\n  --ilo-color-background-active: var(--ilo-color-brand-600);\n  --ilo-color-background-highlight: var(--ilo-color-neutrals-200);\n  --ilo-color-background-hover: var(--ilo-color-brand-100);\n  --ilo-color-background-focus: var(--ilo-color-neutrals-white);\n\n  --ilo-color-borders-default: var(--ilo-color-neutrals-500);\n  --ilo-color-borders-hover: var(--ilo-color-brand-600);\n  --ilo-color-borders-active: var(--ilo-color-brand-600);\n  --ilo-color-borders-focus: var(--ilo-color-yellow-400);\n\n  /**\n    * Sizing\n    */\n  --ilo-breakpoint-xs: #{map-get($breakpoints-foundation, \"xs\")};\n  --ilo-breakpoint-sm: #{map-get($breakpoints-foundation, \"sm\")};\n  --ilo-breakpoint-md: #{map-get($breakpoints-foundation, \"md\")};\n  --ilo-breakpoint-lg: #{map-get($breakpoints-foundation, \"lg\")};\n  --ilo-breakpoint-xl: #{map-get($breakpoints-foundation, \"xl\")};\n  --ilo-breakpoint-xxl: #{map-get($breakpoints-foundation, \"xxl\")};\n  --ilo-border-radius: calc(#{px-to-rem(2)} * var(--ilo-scale));\n\n  /**\n    * Font-size\n    */\n  --ilo-font-size-2xsm: calc(#{px-to-rem(10)} * var(--ilo-scale));\n  --ilo-font-size-xsm: calc(#{px-to-rem(12)} * var(--ilo-scale));\n  --ilo-font-size-sm: calc(#{px-to-rem(14)} * var(--ilo-scale));\n  --ilo-font-size-md: calc(#{px-to-rem(16)} * var(--ilo-scale));\n  --ilo-font-size-lg: calc(#{px-to-rem(18)} * var(--ilo-scale));\n  --ilo-font-size-xlg: calc(#{px-to-rem(24)} * var(--ilo-scale));\n  --ilo-font-size-2xlg: calc(#{px-to-rem(28)} * var(--ilo-scale));\n  --ilo-font-size-3xlg: calc(#{px-to-rem(32)} * var(--ilo-scale));\n  --ilo-font-size-4xlg: calc(#{px-to-rem(36)} * var(--ilo-scale));\n  --ilo-font-size-5xlg: calc(#{px-to-rem(44)} * var(--ilo-scale));\n\n  /**\n    * Font-weight\n    */\n  --ilo-font-weight-regular: 400;\n  --ilo-font-weight-medium: 500;\n  --ilo-font-weight-bold: 700;\n\n  /**\n    * Line Height\n    */\n  --ilo-line-height-xsm: 115%;\n  --ilo-line-height-sm: 120%;\n  --ilo-line-height-md: 125%;\n  --ilo-line-height-lg: 130%;\n  --ilo-line-height-xlg: 135%;\n  --ilo-line-height-2xlg: 145%;\n  --ilo-line-height-3xlg: 150%;\n\n  /**\n    * Letter spacing\n    */\n  --ilo-letter-spacing-xsm: -0.035em;\n  --ilo-letter-spacing-sm: -0.02em;\n  --ilo-letter-spacing-md: 0em;\n  --ilo-letter-spacing-lg: 0.02em;\n\n  /**\n    * Spacing\n    */\n  --ilo-spacing-base: calc(#{px-to-rem(4)} * var(--ilo-scale));\n\n  /**\n    * Transition\n    */\n  --ilo-transition-duration: 150ms;\n  --ilo-transition-timing-function: ease-out;\n\n  /**\n    * Border\n    */\n  --ilo-border-xs: calc(#{px-to-rem(1)} * var(--ilo-scale));\n  --ilo-border-sm: calc(#{px-to-rem(1.5)} * var(--ilo-scale));\n  --ilo-border-md: calc(#{px-to-rem(2)} * var(--ilo-scale));\n  --ilo-border-lg: calc(#{px-to-rem(4)} * var(--ilo-scale));\n\n  /**\n    * Links\n    */\n  --ilo-link-color-default-light: var(--ilo-color-brand-800);\n  --ilo-link-color-default-dark: var(--ilo-color-neutrals-white);\n\n  --ilo-link-color-visited-light: var(--ilo-color-purple-600);\n  --ilo-link-color-visited-dark: var(--ilo-color-neutrals-500);\n\n  --ilo-link-color-hover-light: var(--ilo-color-brand-600);\n  --ilo-link-color-hover-dark: var(--ilo-color-brand-600);\n\n  --ilo-link-color-active-light: var(--ilo-color-brand-800);\n  --ilo-link-color-active-dark: var(--ilo-color-brand-800);\n\n  --ilo-link-color-focus-light: var(--ilo-color-brand-800);\n  --ilo-link-color-focus-dark: var(--ilo-color-brand-800);\n\n  --ilo-link-background-default-light: transparent;\n  --ilo-link-background-default-dark: transparent;\n\n  --ilo-link-background-hover-light: transparent;\n  --ilo-link-background-hover-dark: var(--ilo-color-neutrals-white);\n\n  --ilo-link-background-focus-light: var(--ilo-color-yellow-400);\n  --ilo-link-background-focus-dark: var(--ilo-color-yellow-400);\n}\n","// Set Arabic fonts\n:root[lang*=\"ar\"],\n[lang*=\"ar\"] {\n  --ilo-fonts-display: var(--ilo-fonts-display-ar);\n  --ilo-fonts-copy: var(--ilo-fonts-copy-ar);\n\n  // Letter spacing overrides for Arabic. Different letter spacing values cause incorrect\n  // glpyhs to be rendered. See https://github.com/international-labour-organization/designsystem/issues/1547\n  --ilo-letter-spacing-xsm: 0;\n  --ilo-letter-spacing-sm: 0;\n  --ilo-letter-spacing-md: 0;\n  --ilo-letter-spacing-lg: 0;\n}\n\n// Set Chinese system fonts\n:root[lang*=\"zh\"],\n[lang*=\"zh\"] {\n  --ilo-fonts-display: var(--ilo-fonts-display-zh);\n  --ilo-fonts-copy: var(--ilo-fonts-copy-zh);\n}\n\n// Set Japanese system fonts\n:root[lang*=\"ja\"],\n[lang*=\"ja\"] {\n  --ilo-fonts-display: var(--ilo-fonts-display-jp);\n  --ilo-fonts-copy: var(--ilo-fonts-copy-jp);\n}\n\nhtml,\nbody {\n  color: var(--ilo-color-light-text-default);\n  font-family: var(--ilo-fonts-copy);\n  font-size: var(--ilo-font-size-base);\n  line-height: var(--ilo-line-height-base);\n  letter-spacing: normal;\n  -webkit-font-smoothing: antialiased;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh5 {\n  font-family: var(--ilo-fonts-display);\n}\n"]}
+{"version":3,"sources":["_reset.scss","theme/_typography.scss","theme/_foundation.scss","_typography.scss"],"names":[],"mappings":"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","file":"global.css","sourcesContent":["/**\n* This file is an opinionated reset that is based on https://nicolas-cusan.github.io/destyle.css/\n* it aims to provide a clean layer for styling, the reset should be used with normalize.css in order to create\n* a normalized base\n**/\n\n*,\n::before,\n::after {\n  box-sizing: border-box;\n}\n\nbody,\np,\ntable,\nblockquote,\naddress,\npre,\niframe,\nform,\nfigure,\ndl,\nul,\nol,\nfieldset,\noption,\nlegend {\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  margin: 0;\n  font-size: inherit;\n  font-weight: inherit;\n}\n\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\nsection {\n  display: block;\n}\n\nbody {\n  line-height: 1;\n}\n\nul {\n  list-style: none;\n}\n\ntable {\n  border-color: inherit;\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\ntd,\nth {\n  vertical-align: top;\n  padding: 0;\n}\n\nth {\n  text-align: left;\n  font-weight: bold;\n}\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  -webkit-appearance: none;\n  appearance: none;\n  vertical-align: middle;\n  color: inherit;\n  font: inherit;\n  background: transparent;\n  padding: 0;\n  margin: 0;\n  border-radius: 0;\n  text-align: inherit;\n  text-transform: inherit;\n}\n\nhr {\n  box-sizing: content-box;\n  height: 0;\n  overflow: visible;\n  border-top-width: 1px;\n  margin: 0;\n  clear: both;\n  color: inherit;\n}\n\ntextarea {\n  overflow: auto;\n}\n\nselect {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n\n/// Makes SVGs accessible in high contrast mode\n/// @link https://github.com/IBM/carbon-elements/issues/345#issuecomment-466577293 Carbon-elements #345\n@media screen and (-ms-high-contrast: active) {\n  svg {\n    fill: ButtonText;\n  }\n}\n","@use \"../config\" as *;\n\n:root {\n  // Display Font Families\n  --ilo-fonts-display: Overpass, Noto Sans, sans-serif;\n  --ilo-fonts-display-ar: Vazirmatn, sans-serif;\n  --ilo-fonts-display-zh: PingFang SC, Microsoft YaHei, 微软雅黑, sans-serif;\n  --ilo-fonts-display-jp: Noto Sans CJK JP, Yu Gothic, Hiragino Sans,\n    TakaoPGothic, sans-serif;\n\n  // Copy font families\n  --ilo-fonts-copy: Noto Sans, sans-serif;\n  --ilo-fonts-copy-ar: Vazirmatn, sans-serif;\n  --ilo-fonts-copy-zh: PingFang SC, Microsoft YaHei, 微软雅黑, sans-serif;\n  --ilo-fonts-copy-jp: Noto Sans CJK JP, Yu Gothic, Hiragino Sans, TakaoPGothic,\n    sans-serif;\n\n  --ilo-fonts-monospace: monospace;\n  --ilo-line-height: 1.46;\n\n  // Font Sizes\n  --ilo-font-size-base: #{$base-font-size};\n  --ilo-font-size-2xsm: px-to-rem(10px);\n  --ilo-font-size-xsm: px-to-rem(12px);\n  --ilo-font-size-sm: px-to-rem(14px);\n  --ilo-font-size-md: px-to-rem(16px);\n  --ilo-font-size-lg: px-to-rem(18px);\n  --ilo-font-size-xlg: px-to-rem(24px);\n  --ilo-font-size-2xlg: px-to-rem(28px);\n  --ilo-font-size-3xlg: px-to-rem(32px);\n  --ilo-font-size-4xlg: px-to-rem(36px);\n  --ilo-font-size-5xlg: px-to-rem(44px);\n\n  // Font Weight\n  --ilo-font-weight-light: 300;\n  --ilo-font-weight-regular: 400;\n  --ilo-font-weight-medium: 500;\n  --ilo-font-weight-bold: 700;\n\n  // Line Height\n  --ilo-line-height-base: 27.24px;\n  --ilo-line-height-xsm: 1.15;\n  --ilo-line-height-sm: 1.2;\n  --ilo-line-height-md: 1.25;\n  --ilo-line-height-lg: 1.3;\n  --ilo-line-height-xlg: 1.35;\n  --ilo-line-height-2xlg: 1.45;\n  --ilo-line-height-3xlg: 1.5;\n\n  // Letter Spacing\n  --ilo-letter-spacing-xsm: -3.5%;\n  --ilo-letter-spacing-sm: -2%;\n  --ilo-letter-spacing-md: 0;\n  --ilo-letter-spacing-lg: 2%;\n}\n","@use \"sass:map\";\n@use \"../functions\" as *;\n@use \"./breakpoints\" as *;\n@use \"./typography\" as *;\n\n:root {\n  --ilo-scale: 1; // default scale for the design system\n\n  /**\n    * Layout\n  */\n  --ilo-layout-max-width: #{px-to-rem(1300px)};\n  --ilo-layout-padding: #{px-to-rem(20px)};\n\n  /**\n    * Legacy Colors (aliases pointing to new global colors)\n    *\n    * @deprecated Use the Light/Dark Semantic Colors below — they name the role a\n    * colour plays (Text, Action, Icon, Border, Container Background, Page\n    * Background, Supportive Feedback, Generic) rather than the colour itself.\n    * These aliases are kept for backwards compatibility with downstream consumers\n    * only. Nothing inside this repo references them any more — not the component\n    * styles, not the Twig templates, not the React components, not Storybook — so\n    * the whole block can be deleted in the next major of @ilo-org/styles.\n    */\n  --ilo-color-white: var(--ilo-color-neutrals-white);\n  --ilo-color-blue: var(--ilo-color-brand-600);\n  --ilo-color-blue-lighter: var(--ilo-color-brand-100);\n  --ilo-color-blue-light: var(--ilo-color-brand-200);\n  --ilo-color-blue-dark: var(--ilo-color-brand-800);\n  --ilo-color-blue-medium: rgba(210, 213, 242, 1);\n  --ilo-color-blue-ramp: var(--ilo-color-brand-700);\n  --ilo-color-blue-dark-ramp: var(--ilo-color-brand-800-transparent);\n  --ilo-color-gray-charcoal: var(--ilo-color-neutrals-black);\n  --ilo-color-gray-accessible: var(--ilo-color-neutrals-700);\n  --ilo-color-gray-light: var(--ilo-color-neutrals-200);\n  --ilo-color-gray-light-semi-transparent: rgba(237, 240, 242, 0.25);\n  --ilo-color-gray-base: var(--ilo-color-neutrals-500);\n  --ilo-color-red: var(--ilo-color-red-500);\n  --ilo-color-red-light: var(--ilo-color-red-100);\n  --ilo-color-red-dark: var(--ilo-color-red-600);\n  --ilo-color-red-ramp: var(--ilo-color-red-500-transparent);\n  --ilo-color-yellow: var(--ilo-color-yellow-400);\n  --ilo-color-yellow-light: var(--ilo-color-yellow-100);\n  --ilo-color-yellow-ramp: var(--ilo-color-yellow-400-transparent);\n  --ilo-color-green: var(--ilo-color-green-400);\n  --ilo-color-green-light: var(--ilo-color-green-100);\n  --ilo-color-green-ramp: var(--ilo-color-green-400-transparent);\n  --ilo-color-turquoise: var(--ilo-color-turquoise-500);\n  --ilo-color-purple: var(--ilo-color-purple-600);\n\n  /**\n    * New Global Colors\n    */\n\n  // Brand\n  --ilo-color-brand-800: rgba(35, 0, 80, 1);\n  --ilo-color-brand-800-transparent: rgba(35, 0, 80, 0.5);\n  --ilo-color-brand-700: rgba(21, 31, 133, 1);\n  --ilo-color-brand-600: rgba(30, 45, 190, 1);\n  --ilo-color-brand-600-transparent: rgba(30, 45, 190, 0.4);\n  --ilo-color-brand-500: rgba(50, 100, 200, 1);\n  --ilo-color-brand-400: rgba(90, 135, 205, 1);\n  --ilo-color-brand-300: rgba(130, 175, 220, 1);\n  --ilo-color-brand-200: rgba(190, 220, 250, 1);\n  --ilo-color-brand-100: rgba(235, 245, 253, 1);\n\n  // Neutrals\n  --ilo-color-neutrals-black: rgba(45, 45, 45, 1);\n  --ilo-color-neutrals-700: rgba(109, 109, 109, 1);\n  --ilo-color-neutrals-500: rgba(184, 196, 204, 1);\n  --ilo-color-neutrals-200: rgba(237, 240, 242, 1);\n  --ilo-color-neutrals-white: rgba(255, 255, 255, 1);\n\n  // Red\n  --ilo-color-red-800: rgba(125, 18, 26, 1);\n  --ilo-color-red-700: rgba(150, 36, 45, 1);\n  --ilo-color-red-600: rgba(200, 48, 60, 1);\n  --ilo-color-red-500: rgba(250, 60, 75, 1);\n  --ilo-color-red-500-transparent: rgba(250, 60, 75, 0.2);\n  --ilo-color-red-400: rgba(251, 99, 111, 1);\n  --ilo-color-red-300: rgba(252, 138, 147, 1);\n  --ilo-color-red-200: rgba(253, 177, 183, 1);\n  --ilo-color-red-100: rgba(254, 216, 219, 1);\n\n  // Yellow\n  --ilo-color-yellow-800: rgba(165, 104, 3, 1);\n  --ilo-color-yellow-700: rgba(215, 135, 0, 1);\n  --ilo-color-yellow-600: rgba(228, 148, 40, 1);\n  --ilo-color-yellow-500: rgba(250, 180, 40, 1);\n  --ilo-color-yellow-400: rgba(255, 205, 45, 1);\n  --ilo-color-yellow-400-transparent: rgba(255, 205, 45, 0.2);\n  --ilo-color-yellow-300: rgba(255, 220, 108, 1);\n  --ilo-color-yellow-200: rgba(255, 235, 171, 1);\n  --ilo-color-yellow-100: rgba(255, 245, 200, 1);\n\n  // Green\n  --ilo-color-green-800: rgba(21, 66, 0, 1);\n  --ilo-color-green-700: rgba(56, 90, 40, 1);\n  --ilo-color-green-600: rgba(84, 135, 60, 1);\n  --ilo-color-green-500: rgba(112, 180, 80, 1);\n  --ilo-color-green-400: rgba(140, 225, 100, 1);\n  --ilo-color-green-400-transparent: rgba(140, 225, 100, 0.2);\n  --ilo-color-green-300: rgba(175, 234, 147, 1);\n  --ilo-color-green-200: rgba(209, 243, 193, 1);\n  --ilo-color-green-100: rgba(232, 249, 224, 1);\n\n  // Turquoise\n  --ilo-color-turquoise-800: rgba(2, 84, 84, 1);\n  --ilo-color-turquoise-700: rgba(4, 147, 147, 1);\n  --ilo-color-turquoise-600: rgba(5, 189, 189, 1);\n  --ilo-color-turquoise-500: rgba(5, 210, 210, 1);\n  --ilo-color-turquoise-400: rgba(105, 228, 228, 1);\n  --ilo-color-turquoise-300: rgba(158, 242, 242, 1);\n  --ilo-color-turquoise-200: rgba(180, 250, 247, 1);\n  --ilo-color-turquoise-100: rgba(210, 251, 251, 1);\n\n  // Purple\n  --ilo-color-purple-800: rgba(95, 0, 55, 1);\n  --ilo-color-purple-700: rgba(119, 20, 73, 1);\n  --ilo-color-purple-600: rgba(150, 10, 85, 1);\n  --ilo-color-purple-500: rgba(171, 59, 119, 1);\n  --ilo-color-purple-400: rgba(203, 133, 170, 1);\n  --ilo-color-purple-300: rgba(224, 182, 204, 1);\n  --ilo-color-purple-200: rgba(240, 210, 224, 1);\n  --ilo-color-purple-100: rgba(245, 231, 238, 1);\n\n  /**\n    * Light Semantic Colors\n    */\n\n  // Text\n  --ilo-color-light-text-default: var(--ilo-color-neutrals-black);\n  --ilo-color-light-text-subtle: var(--ilo-color-neutrals-700);\n  --ilo-color-light-text-brand: var(--ilo-color-brand-800);\n  --ilo-color-light-text-accent: var(--ilo-color-purple-600);\n  --ilo-color-light-text-inverse: var(--ilo-color-neutrals-white);\n\n  // Action\n  --ilo-color-light-action-default: var(--ilo-color-brand-800);\n  --ilo-color-light-action-hover: var(--ilo-color-brand-600);\n  --ilo-color-light-action-selected: var(--ilo-color-brand-600);\n  --ilo-color-light-action-inverse: var(--ilo-color-neutrals-white);\n\n  // Icon\n  --ilo-color-light-icon-default: var(--ilo-color-neutrals-black);\n  --ilo-color-light-icon-subtle: var(--ilo-color-neutrals-500);\n  --ilo-color-light-icon-brand: var(--ilo-color-brand-800);\n  --ilo-color-light-icon-disabled: var(--ilo-color-neutrals-200);\n  --ilo-color-light-icon-accent: var(--ilo-color-purple-600);\n  --ilo-color-light-icon-inverse: var(--ilo-color-neutrals-white);\n\n  // Border\n  --ilo-color-light-border-default: var(--ilo-color-neutrals-500);\n  --ilo-color-light-border-subtle: var(--ilo-color-neutrals-200);\n  --ilo-color-light-border-brand: var(--ilo-color-brand-600);\n  --ilo-color-light-border-brand-2: var(--ilo-color-brand-200);\n  --ilo-color-light-border-brand-3: var(--ilo-color-brand-800);\n  --ilo-color-light-border-brand-4: var(--ilo-color-purple-600);\n  --ilo-color-light-border-focus: var(--ilo-color-yellow-400);\n  --ilo-color-light-border-inverse: var(--ilo-color-neutrals-white);\n\n  // Container Background\n  --ilo-color-light-container-bg-default: var(--ilo-color-neutrals-white);\n  --ilo-color-light-container-bg-subtle: var(--ilo-color-brand-100);\n  --ilo-color-light-container-bg-brand: var(--ilo-color-brand-800);\n  --ilo-color-light-container-bg-disabled: var(--ilo-color-neutrals-200);\n  --ilo-color-light-container-bg-inactive: var(--ilo-color-neutrals-500);\n  --ilo-color-light-container-bg-inverse-subtle: var(--ilo-color-neutrals-700);\n  --ilo-color-light-container-bg-inverse: var(--ilo-color-neutrals-black);\n  --ilo-color-light-container-bg-accent: var(--ilo-color-yellow-400);\n\n  // Page Background\n  --ilo-color-light-page-bg-default: var(--ilo-color-neutrals-white);\n  --ilo-color-light-page-bg-subtle: var(--ilo-color-brand-100);\n\n  // Supportive Feedback\n  --ilo-color-light-feedback-error-dark: var(--ilo-color-red-600);\n  --ilo-color-light-feedback-error-default: var(--ilo-color-red-500);\n  --ilo-color-light-feedback-error-light: var(--ilo-color-red-100);\n  --ilo-color-light-feedback-warning-default: var(--ilo-color-yellow-400);\n  --ilo-color-light-feedback-warning-light: var(--ilo-color-yellow-100);\n  --ilo-color-light-feedback-success-default: var(--ilo-color-green-400);\n  --ilo-color-light-feedback-success-light: var(--ilo-color-green-100);\n  --ilo-color-light-feedback-info-default: var(--ilo-color-brand-600);\n  --ilo-color-light-feedback-info-light: var(--ilo-color-brand-200);\n\n  // Generic\n  --ilo-color-light-generic-turquoise: var(--ilo-color-turquoise-500);\n  --ilo-color-light-generic-purple: var(--ilo-color-purple-600);\n  --ilo-color-light-generic-green: var(--ilo-color-green-400);\n  --ilo-color-light-generic-yellow: var(--ilo-color-yellow-400);\n  --ilo-color-light-generic-ilo-light-blue: var(--ilo-color-brand-100);\n\n  /**\n    * Dark Semantic Colors\n    */\n\n  // Text\n  --ilo-color-dark-text-default: var(--ilo-color-neutrals-white);\n  --ilo-color-dark-text-subtle: var(--ilo-color-neutrals-200);\n  --ilo-color-dark-text-brand: var(--ilo-color-brand-200);\n  --ilo-color-dark-text-accent: var(--ilo-color-yellow-400);\n  --ilo-color-dark-text-inverse: var(--ilo-color-brand-800);\n\n  // Action\n  --ilo-color-dark-action-default: var(--ilo-color-brand-100);\n  --ilo-color-dark-action-hover: var(--ilo-color-brand-200);\n  --ilo-color-dark-action-selected: var(--ilo-color-brand-600);\n  --ilo-color-dark-action-inverse: var(--ilo-color-brand-800);\n\n  // Icon\n  --ilo-color-dark-icon-default: var(--ilo-color-neutrals-white);\n  --ilo-color-dark-icon-subtle: var(--ilo-color-neutrals-700);\n  --ilo-color-dark-icon-brand: var(--ilo-color-brand-200);\n  --ilo-color-dark-icon-disabled: var(--ilo-color-neutrals-700);\n  --ilo-color-dark-icon-accent: var(--ilo-color-yellow-400);\n  --ilo-color-dark-icon-inverse: var(--ilo-color-brand-800);\n\n  // Border\n  --ilo-color-dark-border-default: var(--ilo-color-neutrals-white);\n  --ilo-color-dark-border-subtle: var(--ilo-color-neutrals-700);\n  --ilo-color-dark-border-brand: var(--ilo-color-brand-200);\n  --ilo-color-dark-border-brand-2: var(--ilo-color-brand-800);\n  --ilo-color-dark-border-brand-3: var(--ilo-color-brand-100);\n  --ilo-color-dark-border-brand-4: var(--ilo-color-yellow-400);\n  --ilo-color-dark-border-focus: var(--ilo-color-yellow-400);\n  --ilo-color-dark-border-inverse: var(--ilo-color-brand-800);\n\n  // Container Background\n  --ilo-color-dark-container-bg-default: var(--ilo-color-brand-800);\n  --ilo-color-dark-container-bg-subtle: var(--ilo-color-brand-600);\n  --ilo-color-dark-container-bg-brand: var(--ilo-color-brand-100);\n  --ilo-color-dark-container-bg-disabled: var(--ilo-color-neutrals-black);\n  --ilo-color-dark-container-bg-inactive: var(--ilo-color-neutrals-700);\n  --ilo-color-dark-container-bg-inverse-subtle: var(--ilo-color-neutrals-200);\n  --ilo-color-dark-container-bg-inverse: var(--ilo-color-neutrals-white);\n\n  // Page Background\n  --ilo-color-dark-page-bg-default: var(--ilo-color-brand-800);\n  --ilo-color-dark-page-bg-subtle: var(--ilo-color-neutrals-black);\n\n  // Supportive Feedback\n  --ilo-color-dark-feedback-error-dark: var(--ilo-color-red-100);\n  --ilo-color-dark-feedback-error-default: var(--ilo-color-red-500);\n  --ilo-color-dark-feedback-error-light: var(--ilo-color-red-600);\n  --ilo-color-dark-feedback-warning-default: var(--ilo-color-yellow-400);\n  --ilo-color-dark-feedback-warning-light: var(--ilo-color-yellow-800);\n  --ilo-color-dark-feedback-success-default: var(--ilo-color-green-400);\n  --ilo-color-dark-feedback-success-light: var(--ilo-color-green-800);\n  --ilo-color-dark-feedback-info-default: var(--ilo-color-brand-600);\n  --ilo-color-dark-feedback-info-light: var(--ilo-color-brand-800);\n\n  // Generic\n  --ilo-color-dark-generic-turquoise: var(--ilo-color-turquoise-500);\n  --ilo-color-dark-generic-purple: var(--ilo-color-purple-600);\n  --ilo-color-dark-generic-green: var(--ilo-color-green-400);\n  --ilo-color-dark-generic-yellow: var(--ilo-color-yellow-400);\n  --ilo-color-dark-generic-ilo-light-blue: var(--ilo-color-brand-200);\n\n  /**\n    * Legacy Semantic Aliases (preserved for backwards compatibility)\n    */\n  --ilo-color-notification-type-error: var(--ilo-color-red-500);\n  --ilo-color-notification-type-info: var(--ilo-color-brand-600);\n  --ilo-color-notification-type-success: var(--ilo-color-green-400);\n  --ilo-color-notification-type-warning: var(--ilo-color-yellow-400);\n  --ilo-color-background-default: var(--ilo-color-neutrals-white);\n  --ilo-color-background-active: var(--ilo-color-brand-600);\n  --ilo-color-background-highlight: var(--ilo-color-neutrals-200);\n  --ilo-color-background-hover: var(--ilo-color-brand-100);\n  --ilo-color-background-focus: var(--ilo-color-neutrals-white);\n\n  --ilo-color-borders-default: var(--ilo-color-neutrals-500);\n  --ilo-color-borders-hover: var(--ilo-color-brand-600);\n  --ilo-color-borders-active: var(--ilo-color-brand-600);\n  --ilo-color-borders-focus: var(--ilo-color-yellow-400);\n\n  /**\n    * Sizing\n    */\n  --ilo-breakpoint-xs: #{map.get($breakpoints-foundation, \"xs\")};\n  --ilo-breakpoint-sm: #{map.get($breakpoints-foundation, \"sm\")};\n  --ilo-breakpoint-md: #{map.get($breakpoints-foundation, \"md\")};\n  --ilo-breakpoint-lg: #{map.get($breakpoints-foundation, \"lg\")};\n  --ilo-breakpoint-xl: #{map.get($breakpoints-foundation, \"xl\")};\n  --ilo-breakpoint-xxl: #{map.get($breakpoints-foundation, \"xxl\")};\n  --ilo-border-radius: calc(#{px-to-rem(2)} * var(--ilo-scale));\n\n  /**\n    * Font-size\n    */\n  --ilo-font-size-2xsm: calc(#{px-to-rem(10)} * var(--ilo-scale));\n  --ilo-font-size-xsm: calc(#{px-to-rem(12)} * var(--ilo-scale));\n  --ilo-font-size-sm: calc(#{px-to-rem(14)} * var(--ilo-scale));\n  --ilo-font-size-md: calc(#{px-to-rem(16)} * var(--ilo-scale));\n  --ilo-font-size-lg: calc(#{px-to-rem(18)} * var(--ilo-scale));\n  --ilo-font-size-xlg: calc(#{px-to-rem(24)} * var(--ilo-scale));\n  --ilo-font-size-2xlg: calc(#{px-to-rem(28)} * var(--ilo-scale));\n  --ilo-font-size-3xlg: calc(#{px-to-rem(32)} * var(--ilo-scale));\n  --ilo-font-size-4xlg: calc(#{px-to-rem(36)} * var(--ilo-scale));\n  --ilo-font-size-5xlg: calc(#{px-to-rem(44)} * var(--ilo-scale));\n\n  /**\n    * Font-weight\n    */\n  --ilo-font-weight-regular: 400;\n  --ilo-font-weight-medium: 500;\n  --ilo-font-weight-bold: 700;\n\n  /**\n    * Line Height\n    */\n  --ilo-line-height-xsm: 115%;\n  --ilo-line-height-sm: 120%;\n  --ilo-line-height-md: 125%;\n  --ilo-line-height-lg: 130%;\n  --ilo-line-height-xlg: 135%;\n  --ilo-line-height-2xlg: 145%;\n  --ilo-line-height-3xlg: 150%;\n\n  /**\n    * Letter spacing\n    */\n  --ilo-letter-spacing-xsm: -0.035em;\n  --ilo-letter-spacing-sm: -0.02em;\n  --ilo-letter-spacing-md: 0em;\n  --ilo-letter-spacing-lg: 0.02em;\n\n  /**\n    * Spacing\n    */\n  --ilo-spacing-base: calc(#{px-to-rem(4)} * var(--ilo-scale));\n\n  /**\n    * Transition\n    */\n  --ilo-transition-duration: 150ms;\n  --ilo-transition-timing-function: ease-out;\n\n  /**\n    * Border\n    */\n  --ilo-border-xs: calc(#{px-to-rem(1)} * var(--ilo-scale));\n  --ilo-border-sm: calc(#{px-to-rem(1.5)} * var(--ilo-scale));\n  --ilo-border-md: calc(#{px-to-rem(2)} * var(--ilo-scale));\n  --ilo-border-lg: calc(#{px-to-rem(4)} * var(--ilo-scale));\n\n  /**\n    * Links\n    */\n  --ilo-link-color-default-light: var(--ilo-color-brand-800);\n  --ilo-link-color-default-dark: var(--ilo-color-neutrals-white);\n\n  --ilo-link-color-visited-light: var(--ilo-color-purple-600);\n  --ilo-link-color-visited-dark: var(--ilo-color-neutrals-500);\n\n  --ilo-link-color-hover-light: var(--ilo-color-brand-600);\n  --ilo-link-color-hover-dark: var(--ilo-color-brand-600);\n\n  --ilo-link-color-active-light: var(--ilo-color-brand-800);\n  --ilo-link-color-active-dark: var(--ilo-color-brand-800);\n\n  --ilo-link-color-focus-light: var(--ilo-color-brand-800);\n  --ilo-link-color-focus-dark: var(--ilo-color-brand-800);\n\n  --ilo-link-background-default-light: transparent;\n  --ilo-link-background-default-dark: transparent;\n\n  --ilo-link-background-hover-light: transparent;\n  --ilo-link-background-hover-dark: var(--ilo-color-neutrals-white);\n\n  --ilo-link-background-focus-light: var(--ilo-color-yellow-400);\n  --ilo-link-background-focus-dark: var(--ilo-color-yellow-400);\n}\n","// Set Arabic fonts\n:root[lang*=\"ar\"],\n[lang*=\"ar\"] {\n  --ilo-fonts-display: var(--ilo-fonts-display-ar);\n  --ilo-fonts-copy: var(--ilo-fonts-copy-ar);\n\n  // Letter spacing overrides for Arabic. Different letter spacing values cause incorrect\n  // glpyhs to be rendered. See https://github.com/international-labour-organization/designsystem/issues/1547\n  --ilo-letter-spacing-xsm: 0;\n  --ilo-letter-spacing-sm: 0;\n  --ilo-letter-spacing-md: 0;\n  --ilo-letter-spacing-lg: 0;\n}\n\n// Set Chinese system fonts\n:root[lang*=\"zh\"],\n[lang*=\"zh\"] {\n  --ilo-fonts-display: var(--ilo-fonts-display-zh);\n  --ilo-fonts-copy: var(--ilo-fonts-copy-zh);\n}\n\n// Set Japanese system fonts\n:root[lang*=\"ja\"],\n[lang*=\"ja\"] {\n  --ilo-fonts-display: var(--ilo-fonts-display-jp);\n  --ilo-fonts-copy: var(--ilo-fonts-copy-jp);\n}\n\nhtml,\nbody {\n  color: var(--ilo-color-light-text-default);\n  font-family: var(--ilo-fonts-copy);\n  font-size: var(--ilo-font-size-base);\n  line-height: var(--ilo-line-height-base);\n  letter-spacing: normal;\n  -webkit-font-smoothing: antialiased;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh5 {\n  font-family: var(--ilo-fonts-display);\n}\n"]}