/* SIPEKA 2.0 design tokens. Source of truth: .kiro/skills/sipeka-design-system/DESIGN.md */

@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-700.woff2") format("woff2"); }

:root {
  --c-navy-900: #0f1d33;
  --c-navy-800: #16294a;
  --c-navy-700: #1e3a5f;
  --c-navy-600: #2a4d7a;
  --c-navy-100: #e6edf6;
  --c-navy-50:  #f3f6fb;
  --c-green-700: #0b6b52;
  --c-green-600: #0e7f62;
  --c-green-100: #d9f2ea;
  --c-green-50:  #eef9f5;
  --c-ink: #172033;
  --c-muted: #5b6678;
  --c-line: #dde3ec;
  --c-line-strong: #c3ccd9;
  --c-surface: #ffffff;
  --c-canvas: #f5f7fa;
  --c-danger: #b42318;
  --c-danger-50: #fef3f2;
  --c-warning: #a15c07;
  --c-info: #1d5fa8;

  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-xs: .75rem;   /* 12 */
  --fs-sm: .8125rem; /* 13 */
  --fs-base: .875rem;/* 14 */
  --fs-md: 1rem;     /* 16 */
  --fs-lg: 1.125rem; /* 18 */
  --fs-xl: 1.375rem; /* 22 */
  --fs-2xl: 1.75rem; /* 28 */
  --fs-3xl: 2.25rem; /* 36 */

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-full: 999px;

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

  --shadow-sm: 0 1px 2px rgba(15, 29, 51, .06);
  --shadow-md: 0 4px 12px rgba(15, 29, 51, .08);
  --shadow-lg: 0 16px 40px rgba(15, 29, 51, .14);

  --ring: 0 0 0 3px var(--c-green-100);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 160ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--c-ink);
  background: var(--c-canvas);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }

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