/* Kairen public website — design tokens
   Source: 01_Company/06_Brand_and_Communications/03_Brand_OS/40_Visual_Language
   Direction: DEC-000042 Cinematic Industrial Intelligence
   Raw hex here is the token compiler layer. Page CSS uses semantic roles only. */

:root {
  /* --- primitives (Brand OS 03_Color_and_Contrast) --- */
  --k-black: #050505;
  --k-ink: #0b0c0e;
  --k-graphite: #1f2227;
  --k-slate: #6f747c;
  --k-muted: #92959d;
  --k-fog: #f3f4f2;
  --k-porcelain: #f7f7f4;
  --k-stone: #e8e6e1;
  --k-white: #ffffff;
  --k-blue: #2457ff;
  --k-blue-on-dark: #7a9cff;
  --k-blue-soft: #e8eeff;

  /* --- semantic roles: dark surface (default) --- */
  --surface-base: #0b0c0e;
  --surface-raised: #121418;
  --surface-sunken: #08090b;
  --surface-panel: #14171c;
  --text-primary: #f7f7f4;
  --text-secondary: #d7dae0;
  --text-tertiary: #9498a1;
  --text-signal: #7a9cff;
  --line-decorative: rgba(255, 255, 255, 0.09);
  --line-structural: rgba(255, 255, 255, 0.22);
  --signal: #7a9cff;
  --signal-soft: rgba(122, 156, 255, 0.14);
  --signal-line: rgba(122, 156, 255, 0.42);
  --action-fg: #050505;
  --action-bg: #f7f7f4;
  --action-bg-hover: #ffffff;

  /* --- light section overrides applied via .k-light --- */

  /* --- type --- */
  --font-sans: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --font-mono: "SFMono-Regular", "Consolas", "Liberation Mono", "D2Coding", ui-monospace, monospace;

  --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-0: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem);
  --step-1: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --step-2: clamp(1.25rem, 1.13rem + 0.6vw, 1.625rem);
  --step-3: clamp(1.625rem, 1.35rem + 1.35vw, 2.5rem);
  --step-4: clamp(2.125rem, 1.6rem + 2.6vw, 3.75rem);
  --step-5: clamp(2.5rem, 1.6rem + 4.5vw, 5.25rem);

  /* --- layout (8-unit rhythm) --- */
  --container: 1180px;
  --container-wide: 1400px;
  --pad-x: clamp(20px, 4vw, 40px);
  --section-y: clamp(72px, 9vw, 144px);
  --section-y-sm: clamp(56px, 6vw, 96px);
  --grid-gap: clamp(16px, 2vw, 24px);

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 260ms;
}

/* Light sections: same roles, inverted surface. Meaning is carried by role, not hex. */
.k-light {
  --surface-base: #f7f7f4;
  --surface-raised: #ffffff;
  --surface-sunken: #eeeeea;
  --surface-panel: #ffffff;
  --text-primary: #0b0c0e;
  --text-secondary: #4b4f57;
  --text-tertiary: #5c6067;
  --text-signal: #2457ff;
  --line-decorative: rgba(0, 0, 0, 0.1);
  --line-structural: rgba(0, 0, 0, 0.28);
  --signal: #2457ff;
  --signal-soft: #e8eeff;
  --signal-line: rgba(36, 87, 255, 0.4);
  --action-fg: #f7f7f4;
  --action-bg: #0b0c0e;
  --action-bg-hover: #1f2227;
}