/* ============================================================================
   Flotic 회사 홈페이지 — 디자인 토큰 (CSS Custom Properties)
   ============================================================================
   앱(lib/core/theme/)의 BokColors·BokSpacing·BokTypography 토큰을 웹 정적
   사이트용 CSS 변수로 미러링한다. 앱 토큰이 바뀌면 이 파일도 함께 갱신할 것.

   소스 대조:
     색상  → lib/core/theme/bok_colors.dart (BokColors)
     간격  → lib/core/theme/bok_spacing.dart (BokSpacing)
     타이포 → lib/core/theme/bok_typography.dart (BokTypography)
     폰트  → lib/core/theme/app_fonts.dart (kPretendardFontFamily 등)
   ============================================================================ */

/* ── 웹폰트 @font-face ──────────────────────────────────────────────────────
   NoonnuBasicGothic — 제목계열 (CDN: projectnoonnu/noon-2410, Regular만 제공)
   Cafe24Ssurround — 아이콘형 '복' 글자 (CDN: fonts-archive/Cafe24Ssurround)
   Pretendard — 본문 (CDN: orioncactus/pretendard, 별도 <link>로 로드)
   ============================================================================ */
@font-face {
  font-family: 'NoonnuBasicGothic';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noon-2410@1.0/NoonnuBasicGothicRegular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cafe24Ssurround';
  src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Cafe24Ssurround/Cafe24Ssurround.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/fonts-archive/Cafe24Ssurround/Cafe24Ssurround.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── 브랜드 색상 (BokColors.primary 계열) ─────────────────────────────── */
  --color-primary: #3182F6;          /* BokColors.primary */
  --color-primary-hover: #1B64DA;    /* BokColors.primaryLight */
  --color-primary-pressed: #0038CC;  /* BokColors.primaryPressed */
  --color-primary-dark-accent: #5C9FFF; /* BokColors.primaryDark */
  --color-primary-dark-well: #1E3A5F;   /* BokColors.primaryDarkWell */
  --color-primary-well: #E4EEFF;     /* BokColors.primaryWell */
  --color-primary-light-well: #E8F3FF; /* BokColors.primaryLightWell */
  --color-on-primary: #FFFFFF;         /* BokColors.onPrimary — 라이트 primary(#3182F6) 위 텍스트 */

  /* ── 라이트 모드 중성색 (BokColors.l* 계열) ───────────────────────────── */
  --color-bg: #F2F4F7;               /* BokColors.lBackground — 메인 캔버스 */
  --color-surface: #FFFFFF;          /* BokColors.lSurface — 카드/시트 */
  --color-surface-container: #E8ECF2; /* BokColors.lSurfaceContainerHighest */
  --color-control-bg: #F9FAFB;       /* BokColors.lControlBg */
  --color-text-primary: #191F28;     /* BokColors.lTextPrimary */
  --color-text-secondary: #4E5968;   /* BokColors.lTextSecondary */
  --color-text-muted: #8B95A1;       /* BokColors.lTextMuted */
  --color-border: #E5E8EB;           /* BokColors.lBorder */
  --color-outline: #D0D6DE;          /* BokColors.lOutline */
  --color-outline-variant: #E0E4EA;  /* BokColors.lOutlineVariant */

  /* ── 상태색 (BokColors.status* 계열) ──────────────────────────────────── */
  --color-success: #1B5E20;
  --color-success-well: #E6F7F2;     /* BokColors.successLightWell */
  --color-error: #E53935;            /* BokColors.error */
  --color-error-well: #FFF0F0;       /* BokColors.lErrorContainer */
  --color-amber: #FF9E0D;            /* BokColors.statusAmber */

  /* ── 다크 모드 (BokColors.d* 계열) — @media (prefers-color-scheme: dark) ── */
  --color-bg-dark: #0F141C;          /* BokColors.dBackground */
  --color-surface-dark: #171F2C;     /* BokColors.dSurface */
  --color-surface-dark-l2: #222E3F;  /* BokColors.dSurfaceL2 */
  --color-text-primary-dark: #F9FAFB; /* BokColors.dTextPrimary */
  --color-text-secondary-dark: #B0B8C1; /* BokColors.dTextSecondary */
  --color-text-muted-dark: #6B7684;  /* BokColors.dTextMuted */
  --color-border-dark: #263345;      /* BokColors.dBorder */

  /* ── 간격 스케일 (BokSpacing) ──────────────────────────────────────────── */
  /* 주 스케일 */
  --space-none: 0;
  --space-px: 1px;
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-xxl: 28px;
  --space-x3l: 32px;
  --space-x4l: 40px;
  --space-x5l: 48px;
  --space-x6l: 56px;
  --space-x7l: 64px;
  /* 특수 고정 */
  --space-content: 80px;
  --space-hero: 100px;
  --space-image: 168px;

  /* ── 타이포그래피 스케일 (BokTypography) ────────────────────────────────── */
  /* 폰트 패밀리 — 본문은 Pretendard CDN, 제목계열은 NoonnuBasicGothic,
     아이콘형 '복' 글자는 Cafe24Ssurround. */
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-display: 'NoonnuBasicGothic', 'Pretendard', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-icon: 'Cafe24Ssurround', 'NoonnuBasicGothic', 'Pretendard', sans-serif;
  --font-brand: 'Noto Sans JP', 'Pretendard', -apple-system, sans-serif;

  /* 크기 (BokTypography 크기 토큰) */
  --text-micro: 12px;     /* BokTypography.micro */
  --text-caption: 12px;   /* BokTypography.caption */
  --text-body-small: 14px; /* BokTypography.bodySmall */
  --text-body: 16px;      /* BokTypography.body */
  --text-body-large: 18px; /* BokTypography.bodyLarge */
  --text-title: 20px;     /* BokTypography.title */
  --text-app-bar-title: 22px; /* BokTypography.appBarTitle */
  --text-headline: 24px;  /* BokTypography.headline */
  --text-headline-large: 28px; /* BokTypography.headlineLarge */
  --text-display: 32px;   /* BokTypography.display */
  --text-display-large: 36px; /* BokTypography.displayLarge */
  --text-display-extra: 48px; /* BokTypography.displayExtra */

  /* 행간 (BokTypography.height* 토큰) */
  --leading-single: 1.0;
  --leading-dense: 1.1;
  --leading-tight: 1.15;
  --leading-compact: 1.2;
  --leading-body-small: 1.35; /* BokTypography.heightBodySmall */
  --leading-title: 1.40;      /* BokTypography.heightTitle */
  --leading-headline: 1.45;   /* BokTypography.heightHeadline */
  --leading-body: 1.48;       /* BokTypography.heightBody */
  --leading-loose: 1.55;      /* BokTypography.heightLoose */
  --leading-display: 1.68;    /* kDisplayLineHeight (app_fonts.dart) */

  /* 자간 (BokTypography.spacing* 토큰) — 웹 렌더링 기준으로 완화.
     앱은 Flutter가 글리프별 커닝을 별도 처리하지만, 웹은 CSS letter-spacing이 글리프 폭과
     무관하게 일괄 적용되므로 과도한 음수 값은 글자 겹침을 유발한다.
     현재 값은 KO/EN 모두에서 단정한 톤을 유지하면서 겹침이 없는 수준으로 조정. */
  --tracking-micro: -0.01em;
  --tracking-body-small: -0.01em;
  --tracking-body: -0.015em;
  --tracking-body-large: -0.02em;
  --tracking-headline: -0.02em;
  --tracking-headline-large: -0.025em;
  --tracking-display: -0.03em;

  /* 굵기 (BokTypography.weight* 토큰) */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semi-bold: 600;
  --weight-bold: 700;
  --weight-extra-bold: 800;
  --weight-black: 900;

  /* ── 레디어스 ──────────────────────────────────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ── 레이아웃 ──────────────────────────────────────────────────────────── */
  --container-max-width: 1080px;
  --container-padding: var(--space-lg); /* 20px — BokSpacing.pageHorizontal */
  --header-height: 64px;

  /* ── 그림자 (절제된 플랫 UI — BokColors.neumorphic* 참고) ──────────────── */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px var(--color-border);
  --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--color-border);

  /* ── 모션 ──────────────────────────────────────────────────────────────── */
  --motion-fast: 150ms ease;
  --motion-base: 250ms ease;
  --motion-slow: 400ms ease;

  /* ── 브랜드 상수 (FloticBrand·LegalEntityInfo 미러링) ───────────────────── */
  --brand-company-ko: '유한회사 플로틱';
  --brand-company-en: 'Flotic LC.';
  --brand-service-ko: '복';
  --brand-service-en: 'Bok';

  /* ── 호환성 별칭 (정책 페이지가 참조하던 토큰 — 기존 값으로 재지정) ──────── */
  --space-2xl: var(--space-xxl);
  --space-3xl: var(--space-x3l);
  --text-h2: var(--text-headline);
  --text-h3: var(--text-title);
  --text-h4: var(--text-body-large);
  --lh-heading: var(--leading-headline);
  --lh-body: var(--leading-body);
  --color-surface-raised: var(--color-surface-container);

  /* ── 모바일 내비게이션 스크림 ────────────────────────────────────────────── */
  --color-scrim-nav: rgba(15, 20, 28, 0.35);
}

/* ── 다크 모드 오버라이드 ─────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: var(--color-primary-dark-accent);
    --color-primary-well: var(--color-primary-dark-well);
    --color-on-primary: #0F141C;
    --color-bg: var(--color-bg-dark);
    --color-surface: var(--color-surface-dark);
    --color-surface-container: #1E2837;
    --color-control-bg: #1F2937;
    --color-text-primary: var(--color-text-primary-dark);
    --color-text-secondary: var(--color-text-secondary-dark);
    --color-text-muted: var(--color-text-muted-dark);
    --color-border: var(--color-border-dark);
    --color-outline: #263345;
    --color-outline-variant: #4A5870;
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--color-border-dark);
    --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--color-border-dark);
  }
}