/* Toss color tokens -- single source of truth (2026-07-11), matching
   android/core/designsystem and ios/Core/DesignSystem's real values, real dark mode
   included. Previously this file hand-copied its own :root block, independently from
   bank-mfe's identical copy -- see the package's own header for the drift that
   caused (bank-mfe's --itunda-green had silently diverged to Apple's system green). */
/*
 * Single source of truth for itunda's web color tokens (2026-07-11).
 *
 * Until this file existed, host-app/src/index.css and bank-mfe/src/index.css each
 * hand-copied the same Toss palette independently -- and one value had already
 * drifted: bank-mfe's --toss-green (as these variables were named at the time) was
 * #34c759 (Apple's iOS system green), not Toss's real green500 (#04C065) that
 * android/core/designsystem/theme/IdsColors.kt and
 * ios/Core/DesignSystem/Sources/Theme/IdsTheme.swift both actually use. Fixed here,
 * corrected everywhere that imports this file instead of its own copy.
 *
 * Light values match android/.../IdsSemanticColors.kt's IdsLightSemanticColors and
 * ios/.../IDS.swift's IDS.Colors exactly (post their own 2026-07-11 reconciliation).
 * Dark values match IdsDarkSemanticColors -- previously the web apps had *no* dark
 * mode at all; this gives them the same real dark palette mobile already has,
 * verified live on Android (see docs/ARCHITECTURE.md §5 item 5), not a guess.
 *
 * Variable names renamed --toss-* -> --itunda-* (2026-08-10, user-flagged): the web
 * layer's own internal vocabulary naming itself after a different company's product
 * had the exact same "unfinished fork, not a real product" problem Android's
 * TossBlue/TossTab aliases just got fixed for (see ItundaAppScreen.kt's own doc
 * comment). Every consuming file (.css and .tsx) was updated to match -- a real
 * rename this time, not deferred as a "drop-in" alias.
 *
 * Grey/blue/red base values below (2026-07-13) are drawn from
 * packages/design-tokens/tokens.json, this repo's real single source of truth for
 * the primitive color scale (sourced from Toss's own official TDS docs) -- verified
 * to match, not codegen'd directly into this file, since this file's own shape is
 * semantic/light-dark-reactive (--itunda-indigo-active, grey-100 as "app background"),
 * not a raw numbered primitive scale like Android's IdsColors.kt/iOS's IdsTheme.swift
 * IdsColors struct, which generate-tokens.js does regenerate directly.
 */
/* Real typeface fix (2026-08-13, direct user feedback: "we are still far away from
   toss") -- see android/core/designsystem/.../Pretendard.kt for the full sourced
   account (github.com/orioncactus/pretendard, SIL Open Font License 1.1, license text
   bundled at packages/design-tokens/PRETENDARD_LICENSE.txt). Every real web app in
   this repo was rendering in the plain OS system-font stack (confirmed via grep
   before this fix, matching Android/iOS's identical gap) despite the whole visual
   language elsewhere being built around Toss's own real look. font-display: swap so
   a slow font load never blocks text from rendering -- an instant system-font paint
   that reflows once Pretendard loads beats a blank screen while it downloads. */
@font-face {
  font-family: "Pretendard";
  src: url("/assets/Pretendard-Regular-BhrLQoBv.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("/assets/Pretendard-Medium-Dw2vNklR.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("/assets/Pretendard-SemiBold-ClEDdoZU.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("/assets/Pretendard-Bold-BYNivUXw.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: light dark;
  /* Single source of truth for the real font stack every consuming app's own body
     rule should reference -- Pretendard first, falling back to the same real system
     stack each app already had if it somehow fails to load. */
  --itunda-font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Brand primary rebranded blue -> indigo (2026-08-22, direct user identity work:
     petal-shape mark + indigo, chosen after a full shape/color exploration pass --
     see the itunda-identity.html design artifact and
     project_itunda_brand_identity.md). Not an invented hex: derived by the same real
     technique Toss's own engineering blog documents for generating a TDS hue family
     (toss.tech/article/tds-color-system-update) -- hold OKLCH lightness+chroma of the
     real Toss blue anchor this token held before, rotate hue to 280 deg (indigo),
     clamp chroma back into sRGB gamut. Renamed --itunda-blue -> --itunda-indigo (not
     left as a misleadingly-named alias) across every consumer -- this file's own
     header already documents the cost of a color token whose name lies about what it
     holds. WCAG-verified against the same real bars the old blue cleared: white-on-
     brand 3.85:1 (was 3.71:1, both above the 3:1 AA-large/UI-component threshold this
     role is actually held to), brand-vs-dark-bg 4.82:1 (was 5.00:1, both comfortably
     clear 4.5:1 AA-normal-text). */
  --itunda-indigo: #7472F4;
  --itunda-indigo-active: #625FE6;
  --itunda-indigo-light: #F0EFFF;
  --itunda-red: #f04452;
  /* Real gap found 2026-08-08 (Toss Simplicity21 research pass, auditing the P2P
     transfer flow): bank-mfe's scam-warning tint box hardcoded #FDECEA directly (3
     call sites in BankDashboard.tsx) instead of a token -- no danger-tint semantic
     existed here at all, unlike --itunda-indigo-light above. Matches Android's real
     IdsColors.dangerTint (IdsSemanticColors.kt) exactly, same reconciliation this
     file's other semantic tokens already follow. */
  --itunda-red-light: #ffeceb;
  /* Real WCAG AA contrast fix (item 240, docs/ACCESSIBILITY.md finding #2) -- the
     original #04c065 measured 2.40:1 against white, failing even the lenient
     3.0:1 AA-large/UI threshold, let alone 4.5:1 AA-normal-text -- any light-mode
     "amount increased"/"payment received" text or icon in this color was under
     WCAG minimums everywhere it appeared. Darkened to #05804a (5.01:1 against
     white), same hue family, comfortably clearing AA-normal-text. Matches the
     identical fix applied the same day to Android's IdsSemanticColors.kt and
     iOS's IDS.swift. Dark mode's own --itunda-green (below) already passes at
     9+:1 and is unchanged. */
  --itunda-green: #05804a;

  --itunda-grey-100: #f2f4f6;
  --itunda-grey-200: #e5e8eb;
  --itunda-grey-300: #d1d6db;
  --itunda-grey-400: #b0b8c1;
  /* Real WCAG AA contrast fix (item 241, docs/ACCESSIBILITY.md finding #1): the
     original #8b95a1 measured 2.76:1 against the app background (--itunda-grey-100)
     and only 3.04:1 against white cards -- both fail 4.5:1 AA-normal-text, the
     threshold that applies since this color renders small caption/timestamp text
     at 493 real call sites, not just large text or UI components. Darkened to
     #636e7c (4.70:1 against grey-100, 5.18:1 against white), computed as the
     minimal step along this token's own hue line toward --itunda-grey-700 that
     clears 4.5:1 on both real backgrounds. Matches the identical fix applied the
     same day to Android's IdsSemanticColors.kt textTertiary and iOS's IDS.swift
     IDS.Colors.textTertiary. The raw Gray500/gray500 primitive scale values used
     elsewhere for non-text roles are deliberately left untouched. */
  --itunda-grey-500: #636e7c;
  --itunda-grey-600: #6b7684;
  --itunda-grey-700: #4e5968;
  --itunda-grey-800: #333d4b;
  --itunda-grey-900: #191f28;

  --itunda-white: #ffffff;
  /* IDS 3.0 semantic/component contract. Product code should consume these roles
     instead of primitive color values. The legacy --itunda-indigo names remain as
     compatibility aliases for existing consumers; the canonical public role is --itunda-brand. */
  --itunda-brand: var(--itunda-indigo);
  --itunda-brand-strong: var(--itunda-indigo-active);
  --itunda-surface-default: var(--itunda-white);
  --itunda-surface-subtle: #f7f8fa;
  --itunda-surface-raised: var(--itunda-white);
  --itunda-surface-brand: var(--itunda-indigo-light);
  --itunda-text-primary: var(--itunda-grey-900);
  --itunda-text-secondary: var(--itunda-grey-700);
  --itunda-text-tertiary: var(--itunda-grey-600);
  --itunda-text-disabled: var(--itunda-grey-400);
  --itunda-text-inverse: var(--itunda-white);
  --itunda-border-default: var(--itunda-grey-200);
  --itunda-border-strong: var(--itunda-grey-300);
  --itunda-focus: var(--itunda-brand);
  --itunda-pressed: var(--itunda-brand-strong);

  /* Canonical component anatomy from tokens.json. These roles are shared across web/native products. */
  --itunda-space-1: 4px;
  --itunda-space-2: 8px;
  --itunda-space-3: 12px;
  --itunda-space-4: 16px;
  --itunda-space-5: 20px;
  --itunda-space-6: 24px;
  --itunda-space-7: 32px;
  --itunda-space-8: 40px;
  --itunda-space-9: 48px;
  --itunda-space-10: 64px;
  --itunda-space-11: 80px;
  --itunda-screen-padding-inline: 20px;
  --itunda-screen-padding-block: 16px;
  --itunda-section-gap: 24px;
  /* Product composition primitives: keep the web surfaces content-first and aligned with native IDS. */
  --itunda-content-measure: 680px;
  --itunda-hero-measure: 760px;
  --itunda-decision-gap: 24px;
  --itunda-touch-target-min: 44px;
  --itunda-touch-target-recommended: 48px;
  --itunda-motion-fast: 140ms;
  --itunda-motion-normal: 220ms;
  --itunda-motion-slow: 420ms;
  --itunda-motion-reduced: 0ms;
  --itunda-content-gap: 16px;
  --itunda-row-gap: 14px;
  --itunda-inline-gap: 12px;
  --itunda-tight-gap: 8px;
  --itunda-button-radius: 16px;
  --itunda-card-radius: 24px;
  --itunda-section-radius: 16px;
  --itunda-icon-radius: 12px;
  --itunda-control-height-sm: 40px;
  --itunda-control-height-md: 48px;
  --itunda-control-height-lg: 56px;
  --itunda-control-radius: 12px;
  --itunda-control-padding-inline: 16px;
  --itunda-control-gap: 8px;
  --itunda-touch-target-minimum: 44px;
  --itunda-touch-target-recommended: 48px;
  --itunda-button-primary-fill: var(--itunda-brand);
  --itunda-button-primary-fill-pressed: var(--itunda-brand-strong);
  --itunda-button-secondary-fill: var(--itunda-surface-brand);
  --itunda-button-secondary-text: var(--itunda-brand-strong);
  --itunda-field-fill: var(--itunda-surface-default);
  --itunda-field-border: var(--itunda-border-default);
  --itunda-field-border-focus: var(--itunda-focus);
  --itunda-field-border-error: var(--itunda-red);


  /* Web-only layout tokens -- no mobile equivalent, kept local to this file rather
     than invented on the mobile side where they don't apply. */
  --itunda-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  --itunda-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.08);
  --itunda-shadow-shell: 0 0 20px rgba(0, 0, 0, 0.05);
  --itunda-overlay-scrim: rgba(0, 0, 0, 0.6);
  --itunda-overlay-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
  --itunda-overlay-shadow-strong: 0 2px 8px rgba(0, 0, 0, 0.15);
  --itunda-skeleton-base: #f6f7f8;
  --itunda-skeleton-highlight: #edeef1;
  --itunda-accent-purple: #8a2be2;
  --itunda-accent-purple-subtle: rgba(138, 43, 226, 0.1);
  --itunda-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Real Toss motion curves (2026-08-24), fetched directly from their own published
     npm packages (@toss/tds-easings@0.0.1 -- `npm pack` + read the real bundled
     dist/esm/index.js, not guessed or approximated): the exact 4 cubic-bezier control
     points Toss ships under each named curve. --itunda-transition above already
     happened to match --itunda-ease-out byte-for-byte before this fix (an earlier,
     unlabeled guess that turned out correct) -- the other 4 named curves never
     existed as tokens before now. Same real values ported to Android
     (IdsMotion.kt's CubicBezierEasing) and iOS (IDS.Motion's Animation.timingCurve)
     in the same pass, so all 3 platforms share identical timing curves, not just
     identical colors/type. Real spring presets (stiffness/damping/mass, for
     Framer Motion's `type: 'spring'` -- CSS transitions can't do real spring physics,
     only bezier) live in lib/motion.ts, sourced from the sibling
     @toss/tds-spring-easing@0.0.1 package the same way. */
  --itunda-ease-linear: cubic-bezier(0, 0, 1, 1);
  --itunda-ease-standard: cubic-bezier(0.6, 0, 0, 0.6);
  --itunda-ease-out: cubic-bezier(0.25, 0.1, 0.25, 1);
  --itunda-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --itunda-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  --itunda-radius-sm: 8px;
  --itunda-radius-md: 12px;
  --itunda-radius-lg: 24px;
  /* Real gap found 2026-08-11 (UI-consistency audit): pill-shaped chips/tags/segmented
     controls across BankDashboard.tsx already hardcode 999px inline at 12+ real call
     sites -- a genuinely distinct shape category from sm/md/lg (a full round-end, not
     a bigger corner radius), just never named as a token before now. */
  --itunda-radius-pill: 999px;

  /* Real TDS typography scale, ported from Android's IdsTypography.kt / iOS's IDS.swift
     (both already sourced 2026-07-13 by directly fetching Toss's own official docs,
     tossmini-docs.toss.im/tds-mobile/foundation/typography, then extended with the
     same iOS-originated `largeAmount` semantic step neither platform's raw TDS scale
     covers -- TDS tops out at 30px, hero currency amounts get 34px on both mobile
     platforms as a deliberate business decision, not an invented number). bank-mfe had
     NO typography token file at all before this (2026-08-19 audit, prompted by direct
     user feedback that itunda's products don't yet FEEL like their real references) --
     every font-size in this file's own consuming components was a bare inline pixel
     value chosen ad hoc, with no cross-platform-consistent scale backing it (e.g.
     AccountBalance's own hero amount hardcoded 36px, matching neither this real 34px
     largeAmount step nor any other real TDS step). Values quoted exactly as Android/
     iOS already use them -- this file does not re-derive or approximate them.
     line-height is unitless (matches this file's own existing convention elsewhere:
     CSS line-height without a unit scales with font-size, avoiding a second value to
     keep in sync if font-size ever changes). */
  --itunda-type-large-amount-size: 34px;
  --itunda-type-large-amount-line-height: 41px;
  --itunda-type-large-amount-weight: 700;

  --itunda-type-title1-size: 22px;
  --itunda-type-title1-line-height: 31px;
  --itunda-type-title1-weight: 700;

  --itunda-type-title2-size: 20px;
  --itunda-type-title2-line-height: 29px;
  --itunda-type-title2-weight: 700;

  --itunda-type-subtitle1-size: 17px;
  --itunda-type-subtitle1-line-height: 25.5px;
  --itunda-type-subtitle1-weight: 600;

  --itunda-type-body1-size: 15px;
  --itunda-type-body1-line-height: 22.5px;
  --itunda-type-body1-weight: 400;

  --itunda-type-body2-size: 13px;
  --itunda-type-body2-line-height: 19.5px;
  --itunda-type-body2-weight: 400;

  --itunda-type-button-size: 16px;
  --itunda-type-button-line-height: 20px;
  --itunda-type-button-weight: 600;

  /* Real full raw TDS scale (2026-08-20), sourced by directly fetching
     tossmini-docs.toss.im/tds-mobile/foundation/typography's complete step table (not
     just the 7 named Typography1-7 steps above, which are itunda's own established
     semantic subset already wired at real call sites on Android/iOS) -- the real TDS
     scale is actually 1px-granular from 11px to 30px, 20 steps total. Named by literal
     pixel value (scale-N) rather than TDS's own confusing "Typography 3 / sub
     Typography 7" ordinal numbering, since the ordinals don't sort by pixel value.
     Font-weight deliberately NOT included per step here (unlike the semantic tokens
     above) -- TDS's own docs only say "five weights available," not a per-step
     weight, and itunda has no established per-step-weight precedent for the sub-steps
     the way it does for the 7 semantic ones. Added specifically to do a real,
     mechanical `fontSize:` token rollout across bank-mfe (see
     project_itunda_product_feel.md roadmap item 5) -- every value below is a literal,
     zero-visual-change swap-in for the exact bare pixel value already used at real
     call sites, not a redesign. */
  --itunda-type-scale-30-size: 30px;
  --itunda-type-scale-30-line-height: 40px;
  --itunda-type-scale-29-size: 29px;
  --itunda-type-scale-29-line-height: 38px;
  --itunda-type-scale-28-size: 28px;
  --itunda-type-scale-28-line-height: 37px;
  --itunda-type-scale-27-size: 27px;
  --itunda-type-scale-27-line-height: 36px;
  --itunda-type-scale-26-size: 26px;
  --itunda-type-scale-26-line-height: 35px;
  --itunda-type-scale-25-size: 25px;
  --itunda-type-scale-25-line-height: 34px;
  --itunda-type-scale-24-size: 24px;
  --itunda-type-scale-24-line-height: 33px;
  --itunda-type-scale-23-size: 23px;
  --itunda-type-scale-23-line-height: 32px;
  --itunda-type-scale-22-size: 22px;
  --itunda-type-scale-22-line-height: 31px;
  --itunda-type-scale-21-size: 21px;
  --itunda-type-scale-21-line-height: 30px;
  --itunda-type-scale-20-size: 20px;
  --itunda-type-scale-20-line-height: 29px;
  --itunda-type-scale-19-size: 19px;
  --itunda-type-scale-19-line-height: 28px;
  --itunda-type-scale-18-size: 18px;
  --itunda-type-scale-18-line-height: 27px;
  --itunda-type-scale-17-size: 17px;
  --itunda-type-scale-17-line-height: 25.5px;
  --itunda-type-scale-16-size: 16px;
  --itunda-type-scale-16-line-height: 24px;
  --itunda-type-scale-15-size: 15px;
  --itunda-type-scale-15-line-height: 22.5px;
  --itunda-type-scale-14-size: 14px;
  --itunda-type-scale-14-line-height: 21px;
  --itunda-type-scale-13-size: 13px;
  --itunda-type-scale-13-line-height: 19.5px;
  --itunda-type-scale-12-size: 12px;
  --itunda-type-scale-12-line-height: 18px;
  --itunda-type-scale-11-size: 11px;
  --itunda-type-scale-11-line-height: 16.5px;
}
/*
 * Real dark mode -- the web apps had zero dark-mode support before this file
 * existed. Mapped by the *role* each variable actually plays in the consuming CSS
 * (grey-100 is the app background; white is the card/raised-surface background;
 * grey-900/700/500 are primary/secondary/tertiary text; grey-200 is the divider),
 * not a blind per-token inversion. Roles that have a direct IdsSemanticColors.kt
 * counterpart use its exact value (blue->brand, red->danger, green->success,
 * grey-100->background, white->surface, grey-900/700/500->text, grey-200->divider).
 *
 * grey-100/200/white/blue corrected 2026-07-21 (matches Android's
 * IdsSemanticColors.kt / iOS's IDS.swift, same date): the previous true-black
 * background and #4C8FFF blue were eyeballed from screenshots on 2026-07-10,
 * which can't reliably tell true black from a very dark grey. Toss's actual
 * currently-published `@toss/tds-colors@0.1.0` npm package ships the real
 * adaptive dark values directly (`--adaptiveBackground: #17171c`,
 * `--adaptiveBackgroundLevel01: #202027`, `--adaptiveHairlineBorder: #3c3c47`,
 * `--adaptiveBlue500: #3485fa`). grey-300/400/600/800 still have no direct
 * semantic counterpart -- re-interpolated as smooth steps between the corrected
 * neighbors (grey-100/200/500), not independently sourced, same as before.
 */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --itunda-indigo: #9B98FF;
    --itunda-indigo-active: #B0AEFF;
    --itunda-indigo-light: #27244A;
    --itunda-red: #ff6b7a;
    --itunda-red-light: #3a1418;
    --itunda-green: #20d394;

    --itunda-grey-100: #17171c;
    --itunda-grey-200: #3c3c47;
    --itunda-grey-300: #454751;
    --itunda-grey-400: #4e515c;
    /* Real WCAG AA contrast fix (item 241, docs/ACCESSIBILITY.md finding #1), computed
       against the REAL current dark tokens above (grey-100 #17171c, white #202027) --
       the accessibility audit's own dark-theme numbers predate the 2026-07-21 true-dark
       correction and are stale. Original #575c66 measured 2.66:1 against grey-100 and
       2.41:1 against card, both far below 4.5:1 AA-normal-text. Lightened to #848a96
       (5.15:1 / 4.67:1), the minimal step toward --itunda-grey-700 that clears 4.5:1 on
       both real backgrounds. Matches the same-day fix on Android/iOS. */
    --itunda-grey-500: #848a96;
    --itunda-grey-600: #787d88;
    --itunda-grey-700: #989eaa;
    --itunda-grey-800: #c4c9d1;
    --itunda-grey-900: #ffffff;

    --itunda-white: #202027;

    --itunda-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    --itunda-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}
/* Explicit app-controlled light theme mirrors the canonical light semantic palette. */
html[data-theme="light"] {
    color-scheme: light;
    --itunda-indigo: #7472F4;
    --itunda-indigo-active: #625FE6;
    --itunda-indigo-light: #F0EFFF;
    --itunda-red: #f04452;
    --itunda-red-light: #ffeceb;
    --itunda-green: #05804a;
    --itunda-grey-100: #f2f4f6;
    --itunda-grey-200: #e5e8eb;
    --itunda-grey-300: #d1d6db;
    --itunda-grey-400: #b0b8c1;
    --itunda-grey-500: #636e7c;
    --itunda-grey-600: #6b7684;
    --itunda-grey-700: #4e5968;
    --itunda-grey-800: #333d4b;
    --itunda-grey-900: #191f28;
    --itunda-white: #ffffff;
    --itunda-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    --itunda-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.08);
}
/* Explicit app-controlled dark theme mirrors the OS dark semantic palette. */
html[data-theme="dark"] {
    color-scheme: dark;
    --itunda-indigo: #9B98FF;
    --itunda-indigo-active: #B0AEFF;
    --itunda-indigo-light: #27244A;
    --itunda-red: #ff6b7a;
    --itunda-red-light: #3a1418;
    --itunda-green: #20d394;

    --itunda-grey-100: #17171c;
    --itunda-grey-200: #3c3c47;
    --itunda-grey-300: #454751;
    --itunda-grey-400: #4e515c;
    /* Real WCAG AA contrast fix (item 241, docs/ACCESSIBILITY.md finding #1), computed
       against the REAL current dark tokens above (grey-100 #17171c, white #202027) --
       the accessibility audit's own dark-theme numbers predate the 2026-07-21 true-dark
       correction and are stale. Original #575c66 measured 2.66:1 against grey-100 and
       2.41:1 against card, both far below 4.5:1 AA-normal-text. Lightened to #848a96
       (5.15:1 / 4.67:1), the minimal step toward --itunda-grey-700 that clears 4.5:1 on
       both real backgrounds. Matches the same-day fix on Android/iOS. */
    --itunda-grey-500: #848a96;
    --itunda-grey-600: #787d88;
    --itunda-grey-700: #989eaa;
    --itunda-grey-800: #c4c9d1;
    --itunda-grey-900: #ffffff;

    --itunda-white: #202027;

    --itunda-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    --itunda-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.35);
}
/* IDS typography contract: one scale, explicit line-heights, and a stable Korean/Latin stack. */
.ids-button,
.ids-field__input,
.ids-tab,
.ids-check,
.ids-switch,
.ids-empty-state {
  font-family: var(--itunda-font-family);
}
:root {
  --itunda-type-body-size: 16px;
  --itunda-type-body-line: 24px;
  --itunda-type-label-size: 15px;
  --itunda-type-label-line: 20px;
  --itunda-type-caption-size: 13px;
  --itunda-type-caption-line: 18px;
  --itunda-type-title-size: 20px;
  --itunda-type-title-line: 28px;
  --itunda-type-display-size: 24px;
  --itunda-type-display-line: 32px;
}
.ids-button,
.ids-field__input {
  font: inherit;
  -webkit-font-smoothing: antialiased;
}
.ids-button {
  position: relative;
  min-height: var(--itunda-control-height-md);
  min-width: var(--itunda-touch-target-minimum, 44px);
  padding: 0 var(--itunda-control-padding-inline);
  border: 0;
  border-radius: var(--itunda-control-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--itunda-control-gap);
  font-weight: var(--itunda-type-weight-semibold, 600);
  line-height: var(--itunda-type-body-line);
  cursor: pointer;
  transition:
    background-color var(--itunda-motion-fast) var(--itunda-ease-out),
    color var(--itunda-motion-fast) var(--itunda-ease-out),
    transform var(--itunda-motion-fast) var(--itunda-ease-out),
    opacity var(--itunda-motion-fast) var(--itunda-ease-out);
}
.ids-button--sm { min-height: var(--itunda-control-height-sm); font-size: var(--itunda-type-scale-14-size); }
.ids-button--md { min-height: var(--itunda-control-height-md); font-size: var(--itunda-type-scale-16-size); }
.ids-button--lg { min-height: var(--itunda-control-height-lg); font-size: var(--itunda-type-scale-17-size); }
.ids-button--full { width: 100%; }
.ids-button--primary {
  background: var(--itunda-button-primary-fill);
  color: var(--itunda-text-inverse);
}
.ids-button--secondary {
  background: var(--itunda-button-secondary-fill);
  color: var(--itunda-button-secondary-text);
}
.ids-button--tertiary {
  background: transparent;
  color: var(--itunda-brand-strong);
}
.ids-button--danger {
  background: var(--itunda-red);
  color: var(--itunda-text-inverse);
}
.ids-button:hover:not(:disabled) { transform: translateY(-1px); }
.ids-button:active:not(:disabled) { transform: scale(0.985); }
.ids-button:focus-visible,
.ids-field__input:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--itunda-focus) 28%, transparent);
  outline-offset: 2px;
}
.ids-button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}
.ids-button--loading { cursor: wait; }
.ids-button__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ids-spin var(--itunda-motion-spinner) linear infinite;
}
@keyframes ids-spin { to { transform: rotate(360deg); } }
.ids-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.ids-field__label {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  color: var(--itunda-text-primary);
  font-size: var(--itunda-type-scale-15-size);
  font-weight: var(--itunda-type-weight-semibold, 600);
  line-height: var(--itunda-type-label-line);
}
.ids-field__required { color: var(--itunda-red); }
.ids-field__input {
  width: 100%;
  min-height: var(--itunda-control-height-lg);
  box-sizing: border-box;
  padding: 0 var(--itunda-control-padding-inline);
  border: 1px solid var(--itunda-field-border);
  border-radius: var(--itunda-control-radius);
  background: var(--itunda-field-fill);
  color: var(--itunda-text-primary);
  caret-color: var(--itunda-brand);
}
.ids-field__input::placeholder { color: var(--itunda-text-tertiary); }
.ids-field__input[aria-invalid="true"] {
  border-color: var(--itunda-field-border-error);
}
.ids-field__message {
  margin: 0;
  color: var(--itunda-text-secondary);
  font-size: var(--itunda-type-caption-size);
  line-height: var(--itunda-type-caption-line);
}
.ids-field__message--error { color: var(--itunda-field-border-error); }
.ids-field__message--success { color: var(--itunda-green); }
@media (prefers-reduced-motion: reduce) {
  .ids-button { transition: none; }
  .ids-button__spinner { animation: none; }
}
@media (min-width: 640px) {
  .ids-button { white-space: nowrap; }
}
.ids-check,
.ids-switch {
  min-height: var(--itunda-touch-target-recommended, 48px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--itunda-text-primary);
  cursor: pointer;
}
.ids-check input,
.ids-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ids-check__box,
.ids-check__radio {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 2px solid var(--itunda-border-strong);
  display: grid;
  place-items: center;
}
.ids-check__box { border-radius: 6px; }
.ids-check__box,
.ids-check__radio { margin-top: 1px; }
.ids-check__radio { border-radius: 50%; }
.ids-check input:checked + .ids-check__box {
  background: var(--itunda-brand);
  border-color: var(--itunda-brand);
}
.ids-check input:checked + .ids-check__box::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--itunda-text-inverse);
  border-bottom: 2px solid var(--itunda-text-inverse);
  transform: rotate(-45deg) translateY(-1px);
}
.ids-check input:checked + .ids-check__radio {
  border-color: var(--itunda-brand);
  box-shadow: inset 0 0 0 5px var(--itunda-surface-default);
  background: var(--itunda-brand);
}
.ids-check__label,
.ids-switch__label { line-height: 1.4; }
.ids-switch__track {
  width: 50px;
  height: 30px;
  padding: 3px;
  box-sizing: border-box;
  border-radius: var(--itunda-radius-pill);
  background: var(--itunda-grey-300);
  transition: background-color var(--itunda-motion-fast) var(--itunda-ease-out);
}
.ids-switch__thumb {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--itunda-surface-default);
  box-shadow: var(--itunda-shadow-control);
  transition: transform var(--itunda-motion-fast) var(--itunda-ease-out);
}
.ids-switch input:checked + .ids-switch__track { background: var(--itunda-brand); }
.ids-switch input:checked + .ids-switch__track .ids-switch__thumb { transform: translateX(20px); }
.ids-switch input:disabled + .ids-switch__track { opacity: 0.48; }
.ids-switch input[aria-invalid="true"] + .ids-switch__track { box-shadow: inset 0 0 0 2px var(--itunda-field-border-error); }
.ids-check:focus-within .ids-check__box,
.ids-check:focus-within .ids-check__radio,
.ids-switch:focus-within .ids-switch__track {
  outline: 3px solid color-mix(in srgb, var(--itunda-focus) 28%, transparent);
  outline-offset: 2px;
}
.ids-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--itunda-radius-pill);
  background: var(--itunda-surface-subtle);
}
.ids-tab {
  min-height: var(--itunda-control-height-md);
  min-width: 44px;
  flex: 1;
  border: 0;
  border-radius: var(--itunda-radius-pill);
  padding: 0 16px;
  background: transparent;
  color: var(--itunda-text-secondary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.ids-tab--active {
  background: var(--itunda-surface-default);
  color: var(--itunda-text-primary);
  box-shadow: var(--itunda-shadow-sm);
}
.ids-tab:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--itunda-focus) 28%, transparent);
  outline-offset: -1px;
}
.ids-tab:disabled { color: var(--itunda-text-tertiary); cursor: not-allowed; }
.ids-tab--active:disabled { background: var(--itunda-surface-subtle); }
.ids-empty-state {
  width: 100%;
  box-sizing: border-box;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.ids-empty-state__icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--itunda-surface-subtle);
  color: var(--itunda-text-secondary);
  font-size: var(--itunda-type-display-size);
  line-height: var(--itunda-type-display-line);
}
.ids-empty-state__title {
  margin: 0;
  color: var(--itunda-text-primary);
  font-size: var(--itunda-type-title-size);
  line-height: var(--itunda-type-title-line);
}
.ids-empty-state__message {
  max-width: 520px;
  margin: 0;
  color: var(--itunda-text-secondary);
  font-size: var(--itunda-type-body-size);
  line-height: var(--itunda-type-body-line);
}
@media (prefers-reduced-motion: reduce) {
  .ids-empty-state * { transition: none !important; animation: none !important; }
}
/* IDS interaction quality: semantic states stay legible without relying on color alone. */
.ids-field__input:disabled{background:var(--itunda-surface-subtle);color:var(--itunda-text-tertiary);cursor:not-allowed}
.ids-field__input[aria-invalid="true"]:focus-visible{outline-color:color-mix(in srgb,var(--itunda-red) 35%,transparent)}
.ids-check,.ids-switch{position:relative}
.ids-check__label,.ids-switch__label{overflow-wrap:anywhere}
.ids-tabs{overflow-x:auto;scrollbar-width:none}
.ids-tabs::-webkit-scrollbar{display:none}
.ids-tab{white-space:nowrap;flex:0 0 auto}
.ids-empty-state__message{overflow-wrap:anywhere}
@media (prefers-reduced-motion: reduce){.ids-button:not(:disabled){will-change:auto}.ids-button:hover:not(:disabled){transform:none}.ids-button:active:not(:disabled){transform:none}.ids-switch__track,.ids-switch__thumb{transition:none}.ids-tab{scroll-behavior:auto}}
/* Production TextField contract: composed controls, multiline, recovery, and resilient localization. */
.ids-field__control {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: stretch;
}
.ids-field__control .ids-field__input {
  min-width: 0;
  flex: 1 1 auto;
}
.ids-field__control:not(.ids-field__control--multiline) .ids-field__input {
  padding-inline: 16px;
}
.ids-field__control--multiline .ids-field__input {
  min-height: 112px;
  padding: 12px 16px;
  line-height: var(--itunda-type-body-line);
  resize: vertical;
}
.ids-field__prefix,
.ids-field__suffix {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--itunda-text-secondary);
  background: var(--itunda-field-fill);
  line-height: 1;
}
.ids-field__prefix {
  padding-inline-start: 16px;
  border: 1px solid var(--itunda-field-border);
  border-inline-end: 0;
  border-radius: var(--itunda-control-radius) 0 0 var(--itunda-control-radius);
}
.ids-field__suffix {
  padding-inline: 12px 16px;
  border: 1px solid var(--itunda-field-border);
  border-inline-start: 0;
  border-radius: 0 var(--itunda-control-radius) var(--itunda-control-radius) 0;
}
.ids-field__prefix + .ids-field__input {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
.ids-field__input:has(~ .ids-field__suffix) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.ids-field__control:focus-within .ids-field__prefix,
.ids-field__control:focus-within .ids-field__suffix {
  border-color: var(--itunda-focus);
}
.ids-field__clear {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  margin-inline-start: -45px;
  border: 1px solid var(--itunda-field-border);
  border-inline-start: 0;
  border-radius: 0;
  background: var(--itunda-field-fill);
  color: var(--itunda-text-secondary);
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}
.ids-field__button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--itunda-focus) 28%, transparent);
  outline-offset: 1px;
}
.ids-field__control:not(.ids-field__control--multiline):has(.ids-field__clear) .ids-field__input {
  padding-inline-end: 52px;
}
.ids-field__control:has(.ids-field__clear) .ids-field__suffix {
  padding-inline-start: 12px;
}
.ids-field__control:focus-within .ids-field__clear {
  border-color: var(--itunda-focus);
}
.ids-field__clear:hover { background: var(--itunda-surface-subtle); }
.ids-field__clear:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--itunda-focus) 28%, transparent);
  outline-offset: 1px;
}
.ids-field__meta {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.ids-field__meta > div { min-width: 0; }
.ids-field__count {
  flex: 0 0 auto;
  color: var(--itunda-text-tertiary);
  font-size: var(--itunda-type-caption-size);
  line-height: var(--itunda-type-caption-line);
  font-variant-numeric: tabular-nums;
}
.ids-field__button {
  min-height: 44px;
  min-width: 44px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--itunda-brand-strong);
  font: inherit;
  font-weight: 600;
  border-radius: var(--itunda-control-radius);
  cursor: pointer;
  overflow-wrap: anywhere;
}
.ids-field__button:disabled {
  color: var(--itunda-text-tertiary);
  cursor: not-allowed;
}
.ids-field__control:has(.ids-field__input[aria-invalid="true"]) .ids-field__prefix,
.ids-field__control:has(.ids-field__input[aria-invalid="true"]) .ids-field__clear,
.ids-field__control:has(.ids-field__input[aria-invalid="true"]) .ids-field__suffix {
  border-color: var(--itunda-field-border-error);
}
@media (max-width: 420px) {
  .ids-field__meta { gap: 8px; }
  .ids-field__count { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .ids-field__clear { transition: none; }
}
.ids-field__control--multiline .ids-field__clear {
  align-self: flex-start;
  margin-top: 12px;
}
/* Select keeps the native platform picker/keyboard model while adding IDS visual affordance. */
.ids-select__control {
  position: relative;
  min-width: 0;
}
.ids-select__input {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 48px;
}
.ids-select__chevron {
  position: absolute;
  inset-inline-end: 16px;
  top: 50%;
  transform: translateY(-58%);
  color: var(--itunda-text-secondary);
  pointer-events: none;
  font-size: 20px;
  line-height: 1;
}
.ids-select__input:disabled + .ids-select__chevron {
  color: var(--itunda-text-tertiary);
}
.ids-select__input:focus-visible + .ids-select__chevron {
  color: var(--itunda-brand-strong);
}
.ids-select__input[aria-invalid="true"] + .ids-select__chevron {
  color: var(--itunda-field-border-error);
}
.ids-select__input option {
  overflow-wrap: anywhere;
}
.ids-select__input:focus-visible {
  outline-offset: 0;
}
.ids-select__input:disabled {
  color: var(--itunda-text-tertiary);
}
/* Checkbox/Radio: native input owns state; IDS visuals mirror it without hiding semantics. */
.ids-check-field {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.ids-check {
  min-width: 0;
  align-items: flex-start;
}
.ids-check input {
  width: 22px;
  height: 22px;
  margin: 0;
  opacity: 0;
}
.ids-check__content {
  min-width: 0;
  display: grid;
  gap: 2px;
  overflow-wrap: anywhere;
}
.ids-check__description {
  color: var(--itunda-text-secondary);
  font-size: var(--itunda-type-caption-size);
  line-height: var(--itunda-type-caption-line);
}
.ids-check__error {
  margin: 0 0 0 32px;
  color: var(--itunda-field-border-error);
  font-size: var(--itunda-type-caption-size);
  line-height: var(--itunda-type-caption-line);
  overflow-wrap: anywhere;
}
.ids-check input:focus-visible + .ids-check__box,
.ids-check input:focus-visible + .ids-check__radio {
  outline: 3px solid color-mix(in srgb, var(--itunda-focus) 28%, transparent);
  outline-offset: 2px;
}
.ids-check input:disabled + .ids-check__box,
.ids-check input:disabled + .ids-check__radio {
  opacity: 0.48;
}
.ids-check input:disabled ~ .ids-check__content {
  color: var(--itunda-text-tertiary);
}
.ids-check input:indeterminate + .ids-check__box {
  background: var(--itunda-brand);
  border-color: var(--itunda-brand);
}
.ids-check input:indeterminate + .ids-check__box::after {
  content: "";
  width: 10px;
  height: 2px;
  background: var(--itunda-text-inverse);
}
.ids-check input[aria-invalid="true"] + .ids-check__box,
.ids-check input[aria-invalid="true"] + .ids-check__radio {
  border-color: var(--itunda-field-border-error);
}
@media (prefers-reduced-motion: reduce) {
  .ids-check * { transition: none !important; }
}
.ids-check input:checked + .ids-check__radio {
  background: var(--itunda-brand);
  border-color: var(--itunda-brand);
  box-shadow: inset 0 0 0 5px var(--itunda-surface-default);
}
.ids-check input:checked:disabled + .ids-check__radio {
  background: var(--itunda-text-tertiary);
  border-color: var(--itunda-text-tertiary);
}
.ids-switch-field {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.ids-switch__content {
  min-width: 0;
  display: grid;
  gap: 2px;
  overflow-wrap: anywhere;
}
.ids-switch__description,
.ids-switch__status {
  color: var(--itunda-text-secondary);
  font-size: var(--itunda-type-caption-size);
  line-height: var(--itunda-type-caption-line);
}
.ids-switch__error {
  margin: 0 0 0 56px;
  color: var(--itunda-field-border-error);
  font-size: var(--itunda-type-caption-size);
  line-height: var(--itunda-type-caption-line);
  overflow-wrap: anywhere;
}
.ids-switch input:focus-visible + .ids-switch__track {
  outline: 3px solid color-mix(in srgb, var(--itunda-focus) 28%, transparent);
  outline-offset: 3px;
}
.ids-switch input:disabled + .ids-switch__track {
  opacity: 0.48;
}
.ids-switch input:disabled ~ .ids-switch__content {
  color: var(--itunda-text-tertiary);
}
.ids-switch input[aria-invalid="true"] + .ids-switch__track {
  box-shadow: 0 0 0 2px var(--itunda-field-border-error);
}
@media (prefers-reduced-motion: reduce) {
  .ids-switch * { transition: none !important; }
}
.ids-tabs {
  min-width: 0;
  align-items: stretch;
  overscroll-behavior-inline: contain;
}
.ids-tab {
  min-width: 44px;
  min-height: 44px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  transition: background-color var(--itunda-motion-fast) var(--itunda-ease-out),
    color var(--itunda-motion-fast) var(--itunda-ease-out),
    box-shadow var(--itunda-motion-fast) var(--itunda-ease-out);
}
.ids-tab + .ids-tab { margin-inline-start: 0; }
@media (max-width: 560px) {
  .ids-tab { padding-inline: 12px; }
}
.ids-tab:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}
.ids-tab:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--itunda-focus) 28%, transparent);
  outline-offset: 2px;
}
.ids-empty-state {
  min-width: 0;
  width: min(100%, 560px);
  margin-inline: auto;
  padding: clamp(24px, 6vw, 48px) 20px;
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}
.ids-empty-state__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--itunda-brand);
  font-size: 28px;
}
.ids-empty-state__title,
.ids-empty-state__message {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.ids-empty-state__title {
  margin: 0;
}
.ids-empty-state__message {
  margin: 0;
  color: var(--itunda-text-secondary);
}
.ids-empty-state__actions {
  margin-top: 8px;
}
.ids-empty-state__actions {
  width: min(100%, 420px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.ids-empty-state__actions > * {
  min-width: 44px;
}
@media (max-width: 480px) {
  .ids-empty-state__actions {
    display: grid;
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ids-empty-state * { transition: none !important; }
  .ids-tab { transition: none; }
}
/* IDS high-contrast resilience: preserve semantic boundaries when forced colors are active. */
@media (forced-colors: active) {
  .ids-button,
  .ids-field__input,
  .ids-select__input,
  .ids-tab,
  .ids-field__clear,
  .ids-field__button {
    forced-color-adjust: auto;
    border-color: ButtonText;
  }
  .ids-button:focus-visible,
  .ids-field__input:focus-visible,
  .ids-select__input:focus-visible,
  .ids-tab:focus-visible,
  .ids-field__clear:focus-visible,
  .ids-field__button:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
  .ids-button:disabled,
  .ids-field__input:disabled,
  .ids-select__input:disabled,
  .ids-tab:disabled {
    color: GrayText;
    border-color: GrayText;
  }
}
body {
  margin: 0;
  font-family: var(--itunda-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  background-color: var(--itunda-surface-subtle);
  color: var(--itunda-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#root {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100svh;
  background-color: var(--itunda-surface-default);
  box-shadow: none;
  position: relative;
  overflow-x: hidden;
}
h1, h2, h3, h4, p {
  margin: 0;
}
button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition: transform 0.1s ease-in-out;
}
button:active {
  transform: scale(0.96);
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--itunda-brand);
  outline-offset: 2px;
}
.itunda-btn {
  min-height: var(--itunda-touch-target-recommended, 48px);
}
/* Shared card/button primitives BankDashboard already relies on (bank-mfe's own
   copy of these classes, since Module Federation doesn't share CSS across remotes
   automatically). */
.itunda-card {
  /* IDS flat composition: grouping comes from spacing and a quiet divider,
     not floating white cards and shadows. */
  background: transparent;
  border-radius: 0;
  padding: var(--itunda-content-gap, 16px) 0;
  border: 0;
  border-bottom: 1px solid var(--itunda-border-default);
  box-shadow: none;
  margin-bottom: 0;
  transition: background-color var(--itunda-motion-fast) var(--itunda-ease-out);
}
.itunda-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 16px;
  width: 100%;
}
.itunda-btn-primary {
  background-color: var(--itunda-button-primary-fill);
  color: var(--itunda-text-inverse);
}
.itunda-btn-secondary {
  background-color: var(--itunda-button-secondary-fill);
  color: var(--itunda-button-secondary-text);
}
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: var(--itunda-skeleton-base);
  background-image: linear-gradient(to right, var(--itunda-skeleton-base) 0%, var(--itunda-skeleton-highlight) 20%, var(--itunda-skeleton-base) 40%, var(--itunda-skeleton-base) 100%);
  background-repeat: no-repeat;
  background-size: 800px 100%;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
}
/* Host shell tab bar, switching between the federated bank_mfe and kyc_mfe remotes. */
.host-tabbar {
  display: flex;
  border-bottom: 1px solid var(--itunda-grey-200);
  padding: 0 20px;
  background: var(--itunda-surface-default);
}
.host-tab {
  flex: 1;
  padding: 16px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--itunda-text-tertiary);
  border-bottom: 2px solid transparent;
}
.host-tab-active {
  color: var(--itunda-brand);
  border-bottom-color: var(--itunda-brand);
}
@media (prefers-reduced-motion: reduce) {
  button,
  .itunda-card,
  .skeleton {
    transition: none !important;
    animation: none !important;
  }

  button:active {
    transform: none;
  }
}
/*$vite$:1*/