/* ============================================================================
   Bok 서비스 랜딩 — 디자인 토큰
   ============================================================================ */

@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 {
  /* Brand */
  --color-primary: #3182F6;
  --color-primary-hover: #1B64DA;
  --color-primary-pressed: #0038CC;
  --color-primary-dark-accent: #5C9FFF;
  --color-primary-dark-well: #1E3A5F;
  --color-primary-well: #E4EEFF;
  --color-primary-light-well: #E8F3FF;
  --color-on-primary: #FFFFFF;

  /* Neutral */
  --color-bg: #F2F4F7;
  --color-surface: #FFFFFF;
  --color-surface-container: #E8ECF2;
  --color-control-bg: #F9FAFB;
  --color-text-primary: #191F28;
  --color-text-secondary: #4E5968;
  --color-text-muted: #8B95A1;
  --color-border: #E5E8EB;
  --color-outline: #D0D6DE;
  --color-outline-variant: #E0E4EA;

  /* Status */
  --color-success: #1B5E20;
  --color-success-well: #E6F7F2;
  --color-error: #E53935;
  --color-error-well: #FFF0F0;
  --color-amber: #FF9E0D;

  /* Dark mode base values */
  --color-bg-dark: #0F141C;
  --color-surface-dark: #171F2C;
  --color-text-primary-dark: #F1F3F6;
  --color-text-secondary-dark: #A0AABD;
  --color-text-muted-dark: #6B7A90;
  --color-border-dark: #263345;

  /* Fonts */
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'NoonnuBasicGothic', var(--font-sans);
  --font-brand: 'Pretendard', -apple-system, sans-serif;
  --font-icon: 'Cafe24Ssurround', var(--font-sans);

  /* Type scale */
  --text-caption: 0.75rem;
  --text-micro: 0.8125rem;
  --text-body-small: 0.875rem;
  --text-body: 1rem;
  --text-body-large: 1.125rem;
  --text-title: 1.25rem;
  --text-headline: 1.5rem;
  --text-headline-large: 2rem;
  --text-display: 2.5rem;
  --text-display-large: 3rem;

  /* Spacing */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-x3l: 40px;
  --space-x4l: 48px;
  --space-x5l: 64px;
  --space-x6l: 80px;
  --space-hero: 100px;

  /* Leading */
  --leading-tight: 1.15;
  --leading-compact: 1.2;
  --leading-body-small: 1.35;
  --leading-title: 1.40;
  --leading-headline: 1.45;
  --leading-body: 1.48;
  --leading-loose: 1.55;
  --leading-display: 1.68;

  /* Tracking */
  --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;

  /* Weight */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semi-bold: 600;
  --weight-bold: 700;
  --weight-extra-bold: 800;
  --weight-black: 900;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Layout */
  --container-max-width: 1120px;
  --container-padding: var(--space-lg);
  --header-height: 64px;

  /* Shadow */
  --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 */
  --motion-fast: 150ms ease;
  --motion-base: 250ms ease;
  --motion-slow: 400ms ease;

  /* Brand constants */
  --brand-company-ko: '유한회사 플로틱';
  --brand-company-en: 'Flotic LC.';
  --brand-service-ko: '복';
  --brand-service-en: 'Bok';

  /* Compat aliases */
  --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);
  /* Visual enhancement tokens */
  --card-hover-border: #3182F6;
  --card-hover-shadow: 0 8px 24px rgba(49,130,246,0.12), 0 0 0 1px rgba(49,130,246,0.18);
  --accent-gradient: linear-gradient(135deg, #3182F6 0%, #6C5CE7 100%);
  --hero-gradient-start: #F2F4F7;
  --hero-gradient-end: #E8F3FF;
  --problem-accent: #FF6B6B;
  --step-accent: #3182F6;
  --value-before-bg: #FFF8F8;
  --value-before-border: #FFD6D6;
  --value-after-bg: #E8F8EE;
  --value-after-border: #86D4A0;
}

@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);
  }
}

@media (max-width: 768px) {
  :root {
    --text-display: 2rem;
    --text-display-large: 2.5rem;
    --text-headline-large: 1.75rem;
    --space-hero: 72px;
    --space-x5l: 48px;
    --space-x6l: 64px;
  }
}