@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  src: url("/assets/fonts/NotoSansJPVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --brand-font: "Inter", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
}

/* Kohak foundations. Rem values respect the reader's root font setting. */
:root {
  --kh-font-ui: var(--brand-font);
  --kh-font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --kh-weight-regular: 400;
  --kh-weight-semibold: 600;
  --kh-text-xs: .75rem;
  --kh-text-sm: .875rem;
  --kh-text-body: 1rem;
  --kh-text-title: 1.5rem;
  --kh-leading-heading: 1.4;
  --kh-leading-body: 1.75;
  --kh-tracking-body: 0em;

  --kh-space-1: .25rem;
  --kh-space-2: .5rem;
  --kh-space-4: 1rem;
  --kh-space-6: 1.5rem;
  --kh-space-8: 2rem;
  --kh-gap-inline: var(--kh-space-2);
  --kh-gap-field: var(--kh-space-4);
  --kh-gap-group: var(--kh-space-6);
  --kh-gap-section: var(--kh-space-8);
  --kh-padding-panel: var(--kh-space-6);
  --kh-page-gutter: var(--kh-space-6);

  --kh-radius-control: .75rem;
  --kh-radius-panel: 1.5rem;
  --kh-radius-pill: 999px;
  --kh-border-width: 1px;
  --kh-focus-width: 2px;
  --kh-focus-offset: 3px;
  --kh-control-min: 2.75rem;
  --kh-icon-default: 1.25rem;
  --kh-icon-stroke: 1.6;
  --kh-content-reading: 48rem;
  --kh-content-workspace: 72.5rem;
  --kh-content-dialog: 26.25rem;
  --kh-content-line: 68ch;

  --kh-color-canvas: #102f9a;
  --kh-color-surface: #153981;
  --kh-color-card: #173f90;
  --kh-color-sidebar: #071e60bf;
  --kh-color-panel: #ffffff0c;
  --kh-color-ink: #fff;
  --kh-color-muted: #d2e1ff;
  --kh-color-border: #ffffff29;
  --kh-color-border-strong: #ffffff38;
  --kh-color-tint: #ffffff12;
  --kh-color-action: #fff;
  --kh-color-action-hover: #e9f3ff;
  --kh-color-action-ink: #1746c5;
  --kh-color-input: #fff;
  --kh-color-input-ink: #142246;
  --kh-color-success: #b6efce;
  --kh-color-warning: #ffdb98;
  --kh-color-danger: #ffc6c2;
  --kh-color-focus: #fff;
  --kh-shadow-overlay: 0 32px 120px #00102c66;
  --kh-blur-panel: 24px;
  --kh-opacity-disabled: .45;
  --kh-duration-normal: 180ms;
  --kh-ease: cubic-bezier(.2, 0, 0, 1);
  --kh-layer-toast: 100;
}
html[data-theme=dark] {
  --kh-color-canvas: #091a4d;
  --kh-color-surface: #0e285f;
  --kh-color-card: #12316f;
  --kh-color-sidebar: #06163bcc;
  --kh-color-panel: #ffffff08;
}
@media(max-width:700px) {
  :root { --kh-page-gutter: var(--kh-space-4); }
}
@media(prefers-reduced-motion:reduce) {
  :root { --kh-duration-normal: 0ms; }
}

/* Semantic type styles are shared with the specimen pages in Storybook. */
.kh-type-title { font:var(--kh-weight-semibold) var(--kh-text-title)/var(--kh-leading-heading) var(--kh-font-ui);letter-spacing:var(--kh-tracking-body); }
.kh-type-body { font:var(--kh-weight-regular) var(--kh-text-body)/var(--kh-leading-body) var(--kh-font-ui);letter-spacing:var(--kh-tracking-body); }
.kh-type-ui { font:var(--kh-weight-regular) var(--kh-text-sm)/var(--kh-leading-heading) var(--kh-font-ui);letter-spacing:var(--kh-tracking-body); }
.kh-type-caption { font:var(--kh-weight-regular) var(--kh-text-xs)/var(--kh-leading-body) var(--kh-font-ui);letter-spacing:var(--kh-tracking-body); }