/* kina design tokens — ported from the Claude Design "kina デザインシステム" project.
   Source of truth: claude.ai/design project 915343d8-24a0-4a9b-ba04-eb40992713ca */

@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;1,300&family=Zen+Old+Mincho:wght@400;500;600&family=Zen+Kaku+Gothic+New:wght@300;400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  /* base — warm neutrals */
  --kina-white: #FFFFFF;
  --kina-cream: #FBF8F3;
  --kina-sand: #F4EDE3;
  --kina-linen: #E8DCCB;
  --kina-clay: #D6C4AE;
  --kina-taupe: #A6947C;
  --kina-mocha: #6B5636;
  --kina-bark: #3E2F13;
  --kina-espresso: #241A0B;

  /* accents */
  --kina-sage-100: #EDF0E8;
  --kina-sage-300: #C3CDB4;
  --kina-sage-500: #7C8A6B;
  --kina-sage-700: #55603F;
  --kina-blush-100: #FAEDE9;
  --kina-blush-300: #EFCFC6;
  --kina-blush-500: #D49A8B;
  --kina-blush-700: #A76B5D;
  --kina-gold-300: #E8D3A4;
  --kina-gold-500: #C29B4E;

  /* semantic — state */
  --kina-success: #6E8B5A;
  --kina-warning: #C08A34;
  --kina-danger: #A6503F;
  --kina-info: #6A7F8C;

  /* semantic — text */
  --text-strong: var(--kina-espresso);
  --text-body: var(--kina-bark);
  --text-muted: var(--kina-mocha);
  --text-subtle: var(--kina-taupe);
  --text-inverse: var(--kina-cream);
  --text-accent: var(--kina-sage-700);
  --text-link: var(--kina-mocha);
  --text-link-hover: var(--kina-bark);

  /* semantic — surface */
  --surface-page: var(--kina-cream);
  --surface-card: var(--kina-white);
  --surface-sunken: var(--kina-sand);
  --surface-raised: var(--kina-white);
  --surface-inverse: var(--kina-bark);
  --surface-accent: var(--kina-sage-100);
  --surface-accent-warm: var(--kina-blush-100);
  --surface-overlay: rgba(36, 26, 11, .44);

  /* semantic — line */
  --border-hairline: rgba(62, 47, 19, .12);
  --border-default: rgba(62, 47, 19, .20);
  --border-strong: rgba(62, 47, 19, .42);
  --border-inverse: rgba(251, 248, 243, .28);

  /* semantic — interactive */
  --action-primary: var(--kina-bark);
  --action-primary-hover: var(--kina-espresso);
  --action-secondary: var(--kina-sage-500);
  --action-secondary-hover: var(--kina-sage-700);
  --focus-ring: rgba(124, 138, 107, .55);

  /* type */
  --font-display: "Jost", "Zen Old Mincho", -apple-system, "Hiragino Kaku Gothic ProN", sans-serif;
  --font-mincho: "Zen Old Mincho", "Hiragino Mincho ProN", serif;
  --font-body: "Zen Kaku Gothic New", "Jost", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --fs-3xs: 11px; --fs-2xs: 12px; --fs-xs: 13px; --fs-sm: 14px; --fs-base: 16px;
  --fs-md: 18px; --fs-lg: 21px; --fs-xl: 26px; --fs-2xl: 33px; --fs-3xl: 41px; --fs-4xl: 52px; --fs-5xl: 66px;

  --lh-tight: 1.18;
  --lh-snug: 1.35;
  --lh-normal: 1.6;
  --lh-loose: 1.9;

  --ls-wordmark: .42em;
  --ls-display: .16em;
  --ls-eyebrow: .24em;
  --ls-body: .02em;
  --ls-tight: 0em;

  /* spacing */
  --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 160px;
  --section-y: var(--space-9);
  --section-y-sm: var(--space-8);
  --gutter: 24px;
  --gutter-lg: 48px;
  --measure: 64ch;
  --container: 1160px;
  --container-narrow: 760px;

  /* radii */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* elevation */
  --shadow-none: none;
  --shadow-hairline: 0 0 0 1px var(--border-hairline);
  --shadow-xs: 0 1px 2px rgba(62, 47, 19, .06);
  --shadow-sm: 0 2px 8px rgba(62, 47, 19, .07);
  --shadow-md: 0 8px 24px rgba(62, 47, 19, .09);
  --shadow-lg: 0 18px 48px rgba(62, 47, 19, .12);
  --blur-veil: blur(10px);
  --veil: rgba(251, 248, 243, .72);

  /* motion */
  --ease-standard: cubic-bezier(.32, .72, .28, 1);
  --ease-out-soft: cubic-bezier(.16, .84, .36, 1);
  --dur-fast: 180ms;
  --dur-base: 280ms;
  --dur-reveal: 900ms;
  --transition-ui: all var(--dur-fast) var(--ease-standard);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  color: var(--text-strong);
  line-height: var(--lh-tight);
  margin: 0;
}

a {
  color: var(--text-link);
  text-decoration: none;
  border-bottom: 1px solid var(--border-default);
  transition: var(--transition-ui);
}
a:hover { color: var(--text-link-hover); border-bottom-color: var(--border-strong); }

::selection { background: var(--kina-sage-300); color: var(--kina-espresso); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
img { max-width: 100%; display: block; }

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