/**
 * leadform-tokens.css
 *
 * Minimal titan design-system subset required by the Global Lead Form bundle
 * (https://www.imgacademy.com/shared/leadform.{js,css}). leadform.css styles the
 * form entirely through titan tokens (--color-theme-*, --space-global-*,
 * --font-sans) and four typography utility classes; titan pages define those
 * globally, these microsites don't. This file supplies ONLY what the form uses.
 *
 * Isolation: every rule is scoped to .lf-root (the bundle's mount root; its
 * dropdown menus portal inside it too). Nothing here touches site styles.
 *
 * Values resolved from titan's https://www.imgacademy.com/shared/lf-tokens.css
 * on 2026-10-16. Identical copy in each site's public/shared/ — keep in sync.
 * To re-check the needed set: every var(--…) in leadform.css not prefixed
 * --lf- or --iti-, plus the font-* classes leadform.js renders.
 */

.lf-root {
  /* Palette (only the raw ds colors leadform.css references directly) */
  --color-ds-blue-50: #f3f4f9;
  --color-ds-slate-200: #d5dbe1;
  --color-ds-slate-400: #8f9fb0;
  --color-ds-slate-1600: #0b1521;
  --color-ds-slate-opacity-1400: #102032cc;

  /* Theme aliases (light theme) */
  --color-theme-bg-default: #ffffff;
  --color-theme-bg-default-hover: #f3f5f6;
  --color-theme-bg-brand: #006feb;
  --color-theme-bg-brand-hover: #0166d7;
  --color-theme-text-default: #080f17;
  --color-theme-text-secondary: #587089;
  --color-theme-text-brand: #006feb;
  --color-theme-text-constant-white: #ffffff;
  --color-theme-text-danger-secondary: #e11d48;
  --color-theme-border-secondary: #a1afbd;
  --color-theme-border-brand-secondary: #006feb;
  --color-theme-border-danger-secondary: #e11d48;
  --color-theme-icon-default: #080f17;
  --color-theme-icon-secondary: #587089;
  --color-theme-icon-tertiary: #8f9fb0;
  --color-theme-icon-brand: #006feb;

  /* Typography */
  --font-sans: "DM Sans", Helvetica, Arial, sans-serif;

  /* Spacing (mobile-first; md and up overridden below) */
  --space-global-3xs: 0.25rem; /* 4px */
  --space-global-2xs: 0.5rem; /* 8px */
  --space-global-xs: 0.75rem; /* 12px */
  --space-global-sm: 1rem; /* 16px */
  --space-global-md: 1.125rem; /* 18px */
  --space-global-lg: 1.25rem; /* 20px */
  --space-global-xl: 1.5rem; /* 24px */
  --space-global-huge: 2.5rem; /* 40px */
}

@media (min-width: 768px) {
  .lf-root {
    --space-global-md: 1.5rem; /* 24px */
    --space-global-lg: 2rem; /* 32px */
    --space-global-xl: 2.5rem; /* 40px */
    --space-global-huge: 4rem; /* 64px */
  }
}

@media (min-width: 1024px) {
  .lf-root {
    --space-global-xl: 3rem; /* 48px */
    --space-global-huge: 5.5rem; /* 88px */
  }
}

/* CJK fallbacks — DM Sans has no CJK glyphs; fall through to each site's font. */
.lf-root:lang(ja) {
  --font-sans: "DM Sans", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}
.lf-root:lang(ko) {
  --font-sans: "DM Sans", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
.lf-root:lang(zh) {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Typography utilities rendered by leadform.js (titan @utility font-*) */
.lf-root .font-headline-2xs { font-family: var(--font-sans); font-weight: 600; font-size: 18px; line-height: 1.18; }
.lf-root .font-body-tight-md { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.24; }
.lf-root .font-body-xs { font-family: var(--font-sans); font-weight: 400; font-size: 12px; line-height: 1.37; }
.lf-root .font-eyebrow-sm { font-family: var(--font-sans); font-weight: 500; font-size: 12px; line-height: 1.37; letter-spacing: 0.12em; text-transform: uppercase; }

@media (min-width: 1024px) {
  .lf-root .font-headline-2xs { font-size: 24px; }
}