/*
 * CARPEN site system
 * Foundation shared by the information landing page and WordPress articles.
 * See docs/CARPEN_DESIGN_SYSTEM.md before changing a token.
 */

:root {
  /* Primitives */
  --cp-navy-950: #071b2d;
  --cp-navy-900: #0a2036;
  --cp-navy-700: #29445b;
  --cp-slate-600: #5f7080;
  --cp-slate-300: #cbd4dc;
  --cp-slate-200: #dce3e8;
  --cp-slate-100: #edf1f4;
  --cp-slate-50: #f7f9fa;
  --cp-white: #ffffff;
  --cp-blue-600: #246bfd;
  --cp-blue-50: #edf4ff;
  --cp-teal-600: #087e73;
  --cp-red-600: #c91d2d;
  --cp-focus: #d97800;

  --cp-space-1: 4px;
  --cp-space-2: 8px;
  --cp-space-3: 12px;
  --cp-space-4: 16px;
  --cp-space-5: 20px;
  --cp-space-6: 24px;
  --cp-space-8: 32px;
  --cp-space-10: 40px;
  --cp-space-12: 48px;
  --cp-space-16: 64px;
  --cp-space-20: 80px;

  --cp-radius-card: 3px;
  --cp-radius-control: 3px;
  --cp-shadow-float: 0 12px 30px rgb(7 27 45 / 9%);
  --cp-duration-fast: 160ms;
  --cp-duration-base: 220ms;
  --font-sans: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  /* Semantic roles */
  --surface-page: var(--cp-slate-50);
  --surface-raised: var(--cp-white);
  --surface-info: var(--cp-blue-50);
  --ink-strong: var(--cp-navy-900);
  --ink-body: var(--cp-navy-700);
  --ink-muted: var(--cp-slate-600);
  --ink-inverse: var(--cp-navy-950);
  --border-subtle: var(--cp-slate-200);
  --action-primary: var(--cp-navy-900);
  --action-info: var(--cp-blue-600);
  --action-hybrid: var(--cp-teal-600);
  --action-human: var(--cp-red-600);
  --focus-ring: var(--cp-focus);

  /* Component roles */
  --button-radius: var(--cp-radius-control);
  --button-primary-bg: var(--action-primary);
  --button-primary-fg: var(--cp-white);
  --button-info-bg: var(--action-info);
  --button-info-fg: var(--cp-white);
  --content-reading: 760px;
  --content-wide: 1180px;
}

html { text-size-adjust: 100%; }

a, button, input, select, textarea, summary {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}