/* ==========================================================================
   Kwest LLC — Design Tokens
   ========================================================================== */

:root {
  /* ---- Brand colors ---- */
  --color-navy: #14213D;
  --color-navy-dark: #0D1729;   /* hover/active state for navy surfaces */
  --color-navy-soft: #1D2E52;   /* elevated navy surface, subtle hover */
  --color-gold: #D4A017;
  --color-gold-dark: #B3860F;   /* hover/active state for gold surfaces */
  --color-gold-soft: #F1DFA8;   /* tint for badges, highlights */
  --color-white: #FFFFFF;

  /* ---- Backgrounds ---- */
  --color-bg: #FFFFFF;
  --color-bg-light: #F7F8FA;
  --color-bg-light-2: #F3F4F6;
  --color-bg-navy: var(--color-navy);

  /* ---- Borders ---- */
  --color-border: #E4E6EA;

  /* ---- Text ---- */
  --color-text-body: #6B7280;      /* default body copy */
  --color-text-secondary: #3D4451; /* headings on light bg */
  --color-text-tertiary: #8A93A3;  /* muted / meta text */
  --color-text-on-navy: #FFFFFF;
  --color-text-hero-subtext: #C3CADA; /* subtext on navy hero sections */
  --color-text-inverse: #FFFFFF;

  /* ---- Typography ---- */
  /* Single stack: Inter covers Latin glyphs, Pretendard/Noto Sans KR
     supply Hangul — the browser falls back per-character automatically. */
  --font-sans:
    'Inter', 'Pretendard Variable', 'Pretendard',
    -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Noto Sans KR', 'Malgun Gothic', Roboto, sans-serif;
  --font-logo: Arial, 'Helvetica Neue', Helvetica, sans-serif; /* wordmark + K monogram only */

  --fs-xs: 0.75rem;    /* 12px */
  --fs-sm: 0.875rem;   /* 14px */
  --fs-base: 1rem;     /* 16px */
  --fs-md: 1.125rem;   /* 18px */
  --fs-lg: 1.25rem;    /* 20px */
  --fs-xl: 1.5rem;     /* 24px */
  --fs-2xl: 1.875rem;  /* 30px */
  --fs-3xl: 2.375rem;  /* 38px */
  --fs-4xl: 3rem;      /* 48px */

  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Content typography scale (site-wide unified levels) ----
     Desktop values below; redefined for mobile at 768px in the media
     query at the end of this file. Same px values in EN and KO. ---- */
  --fs-logo-wordmark: 28px;

  --fs-hero-eyebrow: 28px;

  --fs-hero-title: 48px;
  --fw-hero-title: var(--fw-bold);

  --fs-hero-subtitle: 22px;
  --fw-hero-subtitle: var(--fw-regular);

  --fs-section-header: 36px;
  --fw-section-header: var(--fw-bold);

  /* ---- Body: unified level for intro paragraphs, body copy, card
     descriptions, and section subtext (aliased across three legacy
     variable names so existing rules don't need renaming). ---- */
  --fs-section-subtext: 24px;
  --fw-section-subtext: var(--fw-regular);

  --fs-card-title: 28px;
  --fw-card-title: var(--fw-bold);

  --fs-card-body: 24px;
  --fw-card-body: var(--fw-regular);

  --fs-body-paragraph: 24px;
  --fw-body-paragraph: var(--fw-regular);
  --lh-body-paragraph: 1.6;

  --fs-small: 22px;
  --fw-small: var(--fw-regular);

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-padding: var(--space-5);
  --header-height: 76px;
  --header-height-mobile: 60px;

  /* ---- Logo sizing ---- */
  --logo-icon-size: 66px;
  --logo-icon-size-mobile: 39px;
  --logo-gap: 5px;
  --logo-gap-mobile: 3px;

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px rgba(20, 33, 61, 0.06);
  --shadow-md: 0 4px 12px rgba(20, 33, 61, 0.08);
  --shadow-lg: 0 12px 32px rgba(20, 33, 61, 0.12);

  /* ---- Motion ---- */
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;

  /* ---- Breakpoints (reference only — CSS custom properties can't be
     used inside @media queries, kept here for documentation) ----
     --bp-mobile: 480px;
     --bp-tablet: 768px;
     --bp-desktop: 1024px;
     --bp-wide: 1280px;
  */
}

/* ---- Content typography scale: mobile values ---- */
@media (max-width: 768px) {
  :root {
    --fs-logo-wordmark: 16px;
    --fs-hero-eyebrow: 15px;
    --fs-hero-title: 28px;
    --fs-hero-subtitle: 15px;
    --fs-section-header: 24px;
    --fs-section-subtext: 16px;
    --fs-card-title: 18px;
    --fs-card-body: 16px;
    --fs-body-paragraph: 16px;
    --lh-body-paragraph: 1.5;
    --fs-small: 18px;
  }
}