/* HLogin Fluent 2 — design tokens for HLogin.Web.
   GENERATED from src/WebApp/HLogin.Web/design/tokens.json by design/build-tokens.mjs — do not edit by hand.
   Load order: this file → hl-fluent.css. Theme: <html data-theme="light|dark">, accent: <html data-brand="…">. */

@font-face {
  font-family: "Pretendard";
  src: url("../fonts/pretendard/Pretendard-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("../fonts/pretendard/Pretendard-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("../fonts/pretendard/Pretendard-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("../fonts/pretendard/Pretendard-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* type families */
  --font-base: "Pretendard", "Pretendard Variable", "Segoe UI Variable Text", "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
  --font-mono: Consolas, "Cascadia Mono", "D2Coding", "Courier New", monospace;
  /* color */
  --brand-10: #010022;
  --brand-20: #01002e;
  --brand-30: #01013a;
  --brand-40: #010547;
  --brand-50: #010a52;
  --brand-60: #020e5c;
  --brand-70: #031368;
  --brand-80: #0f2b83;
  --brand-90: #2b4a97;
  --brand-100: #4c69ac;
  --brand-110: #7991c7;
  --brand-120: #8ea4d3;
  --brand-130: #a8bbe1;
  --brand-140: #c3d1ef;
  --brand-150: #dae5fb;
  --brand-160: #eef4fe;
  --colorNeutralForeground1: #21242a;
  --colorNeutralForeground1Hover: #21242a;
  --colorNeutralForeground2: #3f4249;
  --colorNeutralForeground2Hover: #21242a;
  --colorNeutralForeground2BrandHover: var(--brand-80);
  --colorNeutralForeground2BrandPressed: var(--brand-70);
  --colorNeutralForeground3: #5e6168;
  --colorNeutralForeground3Hover: #3f4249;
  --colorNeutralForeground4: #6d7077;
  --colorNeutralForegroundDisabled: #bbbdc1;
  --colorNeutralForegroundOnBrand: #ffffff;
  --colorNeutralForegroundInverted: #ffffff;
  --colorNeutralBackground1: #ffffff;
  --colorNeutralBackground1Hover: #f3f5f9;
  --colorNeutralBackground1Pressed: #dee0e4;
  --colorNeutralBackground1Selected: #e9ebef;
  --colorNeutralBackground2: #f8fafe;
  --colorNeutralBackground2Hover: #eef0f4;
  --colorNeutralBackground3: #f3f5f9;
  --colorNeutralBackground4: #eef0f4;
  --colorNeutralBackground4Hover: #f8fafe;
  --colorNeutralBackground4Pressed: #f3f5f9;
  --colorNeutralBackground5: #e9ebef;
  --colorNeutralBackground6: #e4e6ea;
  --colorNeutralBackgroundDisabled: #eef0f4;
  --colorNeutralBackgroundInverted: #26292f;
  --colorSubtleBackgroundHover: #f3f5f9;
  --colorSubtleBackgroundPressed: #dee0e4;
  --colorSubtleBackgroundSelected: #e9ebef;
  --colorSubtleBackgroundInvertedHover: rgba(0,0,0,0.1);
  --colorSubtleBackgroundInvertedPressed: rgba(0,0,0,0.3);
  --colorNeutralStroke1: #cfd1d5;
  --colorNeutralStroke1Hover: #c5c7cb;
  --colorNeutralStroke1Pressed: #b1b3b7;
  --colorNeutralStroke2: #dee0e4;
  --colorNeutralStroke3: #eef0f4;
  --colorNeutralStrokeAccessible: #5e6168;
  --colorNeutralStrokeAccessibleHover: #54575e;
  --colorNeutralStrokeAccessiblePressed: #4a4d54;
  --colorNeutralStrokeDisabled: #dee0e4;
  --colorNeutralStencil1: #e4e6ea;
  --colorStrokeFocus1: #ffffff;
  --colorStrokeFocus2: #000000;
  --colorBrandBackground: var(--brand-80);
  --colorBrandBackgroundHover: var(--brand-70);
  --colorBrandBackgroundPressed: var(--brand-40);
  --colorBrandBackgroundSelected: var(--brand-60);
  --colorBrandBackground2: var(--brand-160);
  --colorBrandBackground2Hover: var(--brand-150);
  --colorBrandForeground1: var(--brand-80);
  --colorBrandForeground2: var(--brand-70);
  --colorBrandForegroundLink: var(--brand-90);
  --colorBrandForegroundLinkHover: var(--brand-80);
  --colorBrandForegroundLinkPressed: var(--brand-70);
  --colorBrandStroke1: var(--brand-80);
  --colorBrandStroke2: var(--brand-140);
  --colorCompoundBrandBackground: var(--brand-80);
  --colorCompoundBrandBackgroundHover: var(--brand-70);
  --colorCompoundBrandBackgroundPressed: var(--brand-60);
  --colorCompoundBrandStroke: var(--brand-80);
  --colorCompoundBrandStrokePressed: var(--brand-60);
  --colorCompoundBrandForeground1: var(--brand-80);
  --colorNeutralForeground2BrandSelected: var(--brand-80);
  --colorStatusSuccessBackground1: #f1faf1;
  --colorStatusSuccessForeground1: #0e700e;
  --colorStatusSuccessBorder1: #9fd89f;
  --colorStatusWarningBackground1: #fff9f5;
  --colorStatusWarningForeground3: #bc4b09;
  --colorStatusWarningBorder1: #fdcfb4;
  --colorStatusDangerBackground1: #fdf3f4;
  --colorStatusDangerForeground1: #b10e1c;
  --colorStatusDangerBorder1: #eeacb2;
  --colorStatusDangerBackground3: #c50f1f;
  --colorStatusDangerBackground3Hover: #b10e1c;
  --colorStatusDangerBackground3Pressed: #960b18;
  --colorPaletteRedBorder2: #d13438;
  --colorBackgroundOverlay: rgba(0,0,0,0.4);
  --hlHeaderBackground: var(--colorNeutralBackground1);
  --hlHeaderForeground: var(--colorNeutralForeground1);
  --hlHeaderStroke: var(--colorNeutralStroke2);
  --hlNavBackground: var(--colorNeutralBackground2);
  --hlInputStroke: #8f939c;
  --hlLogoPlate: #ffffff;
  --hlBrandPanel: var(--brand-70);
  --hlBrandPanelForeground: #ffffff;
  /* spacing */
  --spacingHorizontalXXS: 2px;
  --spacingHorizontalXS: 4px;
  --spacingHorizontalSNudge: 6px;
  --spacingHorizontalS: 8px;
  --spacingHorizontalMNudge: 10px;
  --spacingHorizontalM: 12px;
  --spacingHorizontalL: 16px;
  --spacingHorizontalXL: 20px;
  --spacingHorizontalXXL: 24px;
  --spacingHorizontalXXXL: 32px;
  --spacingVerticalXXS: 2px;
  --spacingVerticalXS: 4px;
  --spacingVerticalSNudge: 6px;
  --spacingVerticalS: 8px;
  --spacingVerticalMNudge: 10px;
  --spacingVerticalM: 12px;
  --spacingVerticalL: 16px;
  --spacingVerticalXL: 20px;
  --spacingVerticalXXL: 24px;
  --spacingVerticalXXXL: 32px;
  /* radius */
  --borderRadiusNone: 0;
  --borderRadiusSmall: 4px;
  --borderRadiusMedium: 6px;
  --borderRadiusLarge: 8px;
  --borderRadiusXLarge: 12px;
  --borderRadius2XLarge: 16px;
  --borderRadiusCircular: 10000px;
  /* shadow */
  --shadow2: 0 0 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14);
  --shadow4: 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14);
  --shadow8: 0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14);
  --shadow16: 0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14);
  --shadow28: 0 0 8px rgba(0,0,0,0.12), 0 14px 28px rgba(0,0,0,0.14);
  --shadow64: 0 0 8px rgba(0,0,0,0.12), 0 32px 64px rgba(0,0,0,0.14);
  /* strokeWidth */
  --strokeWidthThin: 1px;
  --strokeWidthThick: 2px;
  --strokeWidthThicker: 3px;
  --strokeWidthThickest: 4px;
  /* fontSize */
  --fontSizeBase100: 11px;
  --fontSizeBase200: 13px;
  --fontSizeBase300: 15px;
  --fontSizeBase400: 17px;
  --fontSizeBase500: 21px;
  --fontSizeBase600: 26px;
  --fontSizeHero700: 30px;
  --fontSizeHero800: 34px;
  --fontSizeHero900: 42px;
  --fontSizeHero1000: 72px;
  /* lineHeight */
  --lineHeightBase100: 16px;
  --lineHeightBase200: 18px;
  --lineHeightBase300: 22px;
  --lineHeightBase400: 24px;
  --lineHeightBase500: 30px;
  --lineHeightBase600: 34px;
  --lineHeightHero700: 38px;
  --lineHeightHero800: 42px;
  --lineHeightHero900: 56px;
  --lineHeightHero1000: 98px;
  /* fontWeight */
  --fontWeightRegular: 400;
  --fontWeightMedium: 500;
  --fontWeightSemibold: 600;
  --fontWeightBold: 700;
  /* size */
  --hlHeaderHeight: 48px;
  --hlNavWidth: 240px;
  --hlContentMaxWidth: 1280px;
  --hlFormMaxWidth: 880px;
  --hlLoginCardWidth: 440px;
}

[data-theme="dark"] {
  --colorNeutralForeground1: #ffffff;
  --colorNeutralForeground1Hover: #ffffff;
  --colorNeutralForeground2: #d4d6da;
  --colorNeutralForeground2Hover: #ffffff;
  --colorNeutralForeground2BrandHover: var(--brand-110);
  --colorNeutralForeground2BrandPressed: var(--brand-100);
  --colorNeutralForeground3: #abadb1;
  --colorNeutralForeground3Hover: #d4d6da;
  --colorNeutralForeground4: #97999d;
  --colorNeutralForegroundDisabled: #595c63;
  --colorNeutralForegroundOnBrand: #ffffff;
  --colorNeutralForegroundInverted: #21242a;
  --colorNeutralBackground1: #26292f;
  --colorNeutralBackground1Hover: #3a3d44;
  --colorNeutralBackground1Pressed: #1c1f25;
  --colorNeutralBackground1Selected: #35383f;
  --colorNeutralBackground2: #1c1f25;
  --colorNeutralBackground2Hover: #303339;
  --colorNeutralBackground3: #11141a;
  --colorNeutralBackground4: #080a0f;
  --colorNeutralBackground4Hover: #1c1f25;
  --colorNeutralBackground4Pressed: #000000;
  --colorNeutralBackground5: #000000;
  --colorNeutralBackground6: #303339;
  --colorNeutralBackgroundDisabled: #11141a;
  --colorNeutralBackgroundInverted: #ffffff;
  --colorSubtleBackgroundHover: #35383f;
  --colorSubtleBackgroundPressed: #2b2e34;
  --colorSubtleBackgroundSelected: #303339;
  --colorSubtleBackgroundInvertedHover: rgba(0,0,0,0.1);
  --colorSubtleBackgroundInvertedPressed: rgba(0,0,0,0.3);
  --colorNeutralStroke1: #63666d;
  --colorNeutralStroke1Hover: #72757c;
  --colorNeutralStroke1Pressed: #686b72;
  --colorNeutralStroke2: #4f5259;
  --colorNeutralStroke3: #3a3d44;
  --colorNeutralStrokeAccessible: #abadb1;
  --colorNeutralStrokeAccessibleHover: #bbbdc1;
  --colorNeutralStrokeAccessiblePressed: #b1b3b7;
  --colorNeutralStrokeDisabled: #3f4249;
  --colorNeutralStencil1: #54575e;
  --colorStrokeFocus1: #000000;
  --colorStrokeFocus2: #ffffff;
  --colorBrandBackground: var(--brand-100);
  --colorBrandBackgroundHover: var(--brand-90);
  --colorBrandBackgroundPressed: var(--brand-80);
  --colorBrandBackgroundSelected: var(--brand-80);
  --colorBrandBackground2: var(--brand-20);
  --colorBrandBackground2Hover: var(--brand-30);
  --colorBrandForeground1: var(--brand-120);
  --colorBrandForeground2: var(--brand-130);
  --colorBrandForegroundLink: var(--brand-120);
  --colorBrandForegroundLinkHover: var(--brand-130);
  --colorBrandForegroundLinkPressed: var(--brand-120);
  --colorBrandStroke1: var(--brand-110);
  --colorBrandStroke2: var(--brand-50);
  --colorCompoundBrandBackground: var(--brand-110);
  --colorCompoundBrandBackgroundHover: var(--brand-120);
  --colorCompoundBrandBackgroundPressed: var(--brand-100);
  --colorCompoundBrandStroke: var(--brand-110);
  --colorCompoundBrandStrokePressed: var(--brand-100);
  --colorCompoundBrandForeground1: var(--brand-110);
  --colorNeutralForeground2BrandSelected: var(--brand-110);
  --colorStatusSuccessBackground1: #052505;
  --colorStatusSuccessForeground1: #54b054;
  --colorStatusSuccessBorder1: #107c10;
  --colorStatusWarningBackground1: #4a1e04;
  --colorStatusWarningForeground3: #f98845;
  --colorStatusWarningBorder1: #f7630c;
  --colorStatusDangerBackground1: #3b0509;
  --colorStatusDangerForeground1: #e37d80;
  --colorStatusDangerBorder1: #c50f1f;
  --colorStatusDangerBackground3: #c50f1f;
  --colorStatusDangerBackground3Hover: #b10e1c;
  --colorStatusDangerBackground3Pressed: #960b18;
  --colorPaletteRedBorder2: #e37d80;
  --colorBackgroundOverlay: rgba(0,0,0,0.5);
  --hlHeaderBackground: var(--colorNeutralBackground1);
  --hlHeaderForeground: var(--colorNeutralForeground1);
  --hlHeaderStroke: var(--colorNeutralStroke2);
  --hlNavBackground: var(--colorNeutralBackground2);
  --hlInputStroke: #6f737b;
  --hlLogoPlate: #ffffff;
  --hlBrandPanel: var(--brand-30);
  --hlBrandPanelForeground: #ffffff;
  --shadow2: 0 0 2px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.28);
  --shadow4: 0 0 2px rgba(0,0,0,0.24), 0 2px 4px rgba(0,0,0,0.28);
  --shadow8: 0 0 2px rgba(0,0,0,0.24), 0 4px 8px rgba(0,0,0,0.28);
  --shadow16: 0 0 2px rgba(0,0,0,0.24), 0 8px 16px rgba(0,0,0,0.28);
  --shadow28: 0 0 8px rgba(0,0,0,0.24), 0 14px 28px rgba(0,0,0,0.28);
  --shadow64: 0 0 8px rgba(0,0,0,0.24), 0 32px 64px rgba(0,0,0,0.28);
}

/* accents — <html data-brand="…"> (js/hl-theme.js). Same specificity as :root, so these come after it. */
[data-brand="navy"] {
  --brand-10: #010022;
  --brand-20: #01002e;
  --brand-30: #01013a;
  --brand-40: #010547;
  --brand-50: #010a52;
  --brand-60: #020e5c;
  --brand-70: #031368;
  --brand-80: #0f2b83;
  --brand-90: #2b4a97;
  --brand-100: #4c69ac;
  --brand-110: #7991c7;
  --brand-120: #8ea4d3;
  --brand-130: #a8bbe1;
  --brand-140: #c3d1ef;
  --brand-150: #dae5fb;
  --brand-160: #eef4fe;
}

[data-brand="blue"] {
  --brand-10: #061724;
  --brand-20: #082338;
  --brand-30: #0a2e4a;
  --brand-40: #0c3b5e;
  --brand-50: #0e4775;
  --brand-60: #0f548c;
  --brand-70: #115ea3;
  --brand-80: #0f6cbd;
  --brand-90: #1770c2;
  --brand-100: #1d75c8;
  --brand-110: #62abf5;
  --brand-120: #77b7f7;
  --brand-130: #96c6fa;
  --brand-140: #b4d6fa;
  --brand-150: #cfe4fa;
  --brand-160: #ebf3fc;
}

[data-brand="indigo"] {
  --brand-10: #101228;
  --brand-20: #181b3d;
  --brand-30: #1f234f;
  --brand-40: #282d64;
  --brand-50: #31367c;
  --brand-60: #3a3f94;
  --brand-70: #4145ac;
  --brand-80: #4b4fc7;
  --brand-90: #545bd3;
  --brand-100: #5e66df;
  --brand-110: #8795ff;
  --brand-120: #97a5fe;
  --brand-130: #acb9fe;
  --brand-140: #c3cdfe;
  --brand-150: #d8defe;
  --brand-160: #eef1ff;
}

[data-brand="violet"] {
  --brand-10: #190f25;
  --brand-20: #261738;
  --brand-30: #321e4a;
  --brand-40: #3f265d;
  --brand-50: #4e2d73;
  --brand-60: #5c3489;
  --brand-70: #6a389f;
  --brand-80: #7a3fb8;
  --brand-90: #854bc5;
  --brand-100: #9156d2;
  --brand-110: #b686f3;
  --brand-120: #bf97f7;
  --brand-130: #ccadfa;
  --brand-140: #dac5fa;
  --brand-150: #e6dafa;
  --brand-160: #f4effd;
}

[data-brand="magenta"] {
  --brand-10: #210c1a;
  --brand-20: #331228;
  --brand-30: #421734;
  --brand-40: #541d42;
  --brand-50: #672151;
  --brand-60: #7b2560;
  --brand-70: #8d256e;
  --brand-80: #a3287f;
  --brand-90: #b1358b;
  --brand-100: #bf4298;
  --brand-110: #e375bc;
  --brand-120: #e989c5;
  --brand-130: #efa2d2;
  --brand-140: #f4bdde;
  --brand-150: #f7d5e9;
  --brand-160: #fbeef5;
}

[data-brand="teal"] {
  --brand-10: #0a1818;
  --brand-20: #0d2425;
  --brand-30: #112f31;
  --brand-40: #153c3e;
  --brand-50: #164a4c;
  --brand-60: #18585a;
  --brand-70: #116467;
  --brand-80: #0d7377;
  --brand-90: #18797d;
  --brand-100: #217f83;
  --brand-110: #68b0b4;
  --brand-120: #7ebbbe;
  --brand-130: #9ac9cb;
  --brand-140: #b7d8d9;
  --brand-150: #d1e5e6;
  --brand-160: #ecf4f4;
}

[data-brand="forest"] {
  --brand-10: #0b1510;
  --brand-20: #0f2018;
  --brand-30: #13291f;
  --brand-40: #183327;
  --brand-50: #1a3e2e;
  --brand-60: #1d4936;
  --brand-70: #1c523b;
  --brand-80: #1e5e44;
  --brand-90: #2f6e53;
  --brand-100: #407f63;
  --brand-110: #6da288;
  --brand-120: #81af98;
  --brand-130: #9cc0ae;
  --brand-140: #b9d2c4;
  --brand-150: #d3e2da;
  --brand-160: #eef4f0;
}

[data-brand="graphite"] {
  --brand-10: #111317;
  --brand-20: #191c22;
  --brand-30: #20242c;
  --brand-40: #282e37;
  --brand-50: #303743;
  --brand-60: #38414f;
  --brand-70: #3e4959;
  --brand-80: #475467;
  --brand-90: #576478;
  --brand-100: #677489;
  --brand-110: #8a97aa;
  --brand-120: #9aa5b6;
  --brand-130: #afb8c5;
  --brand-140: #c5ccd5;
  --brand-150: #dadee4;
  --brand-160: #f0f2f4;
}

[data-brand="terracotta"] {
  --brand-10: #2d1813;
  --brand-20: #402019;
  --brand-30: #4f271d;
  --brand-40: #622f23;
  --brand-50: #763627;
  --brand-60: #8b3d2a;
  --brand-70: #9e412b;
  --brand-80: #b5482e;
  --brand-90: #ba4d33;
  --brand-100: #bf5137;
  --brand-110: #ef8a71;
  --brand-120: #f39a84;
  --brand-130: #f7af9d;
  --brand-140: #f9c6b9;
  --brand-150: #fadad2;
  --brand-160: #fbefec;
}

.hl-display {
  font-family: var(--font-base);
  font-size: 72px;
  line-height: 98px;
  font-weight: 600;
}

.hl-largeTitle {
  font-family: var(--font-base);
  font-size: 42px;
  line-height: 56px;
  font-weight: 600;
}

.hl-title1 {
  font-family: var(--font-base);
  font-size: 34px;
  line-height: 42px;
  font-weight: 600;
}

.hl-title2 {
  font-family: var(--font-base);
  font-size: 30px;
  line-height: 38px;
  font-weight: 600;
}

.hl-title3 {
  font-family: var(--font-base);
  font-size: 26px;
  line-height: 34px;
  font-weight: 600;
}

.hl-subtitle1 {
  font-family: var(--font-base);
  font-size: 21px;
  line-height: 30px;
  font-weight: 600;
}

.hl-subtitle2 {
  font-family: var(--font-base);
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
}

.hl-body2 {
  font-family: var(--font-base);
  font-size: 17px;
  line-height: 24px;
  font-weight: 400;
}

.hl-body1 {
  font-family: var(--font-base);
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
}

.hl-body1Strong {
  font-family: var(--font-base);
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
}

.hl-body1Stronger {
  font-family: var(--font-base);
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
}

.hl-caption1 {
  font-family: var(--font-base);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
}

.hl-caption1Strong {
  font-family: var(--font-base);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
}

.hl-caption2 {
  font-family: var(--font-base);
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
}

.hl-code {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
}