/* =========================================
   base.css
   - Reset / Design Tokens / Typography
   (News Media – Global Standard)
========================================= */

/* ------------------------------
   1. Reset & Box model
------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family:
    -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", "Segoe UI",
    Arial, "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--jp-color-text-main);
  background-color: var(--jp-color-bg);
}

.site-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;   /* 端がくっつくのを防ぐならお好みで */
}


/* ------------------------------
   2. Design Tokens (LIGHT MODE)
------------------------------ */
:root {
  /* Background */
  --jp-color-bg: #f3f4f6;
  --jp-color-surface: #ffffff;
  --jp-color-surface-soft: #f9fafb;

  /* Borders */
  --jp-color-border-subtle: #e5e7eb;

  /* Text */
  --jp-color-text-main: #0f172a;
  --jp-color-text-sub: #6b7280;
  --jp-color-text-muted: #9ca3af;

  /* Brand Colors */
  --jp-color-primary: #1d4ed8;       /* メインブルー */
  --jp-color-primary-hover: #1e40af;
  --jp-color-primary-soft: #dbeafe;  /* 淡いブルー背景 */

  --jp-color-accent: #0ea5e9;        /* 補助アクセント */
  --jp-color-danger: #e11d48;

  /* Radius */
  --jp-radius-sm: 0.45rem;
  --jp-radius-md: 0.75rem;
  --jp-radius-lg: 1rem;

  /* Shadows */
  --jp-shadow-soft: 0 12px 40px rgba(15,23,42,0.06);
  --jp-shadow-card: 0 8px 24px rgba(15,23,42,0.04);
  --jp-shadow-strong: 0 24px 60px rgba(15,23,42,0.12);
}


/* ------------------------------
   3. Typography
------------------------------ */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--jp-color-text-main);
}

p {
  margin: 0 0 1rem;
  color: var(--jp-color-text-main);
}

small {
  font-size: 0.82rem;
  color: var(--jp-color-text-muted);
}


/* ------------------------------
   4. Links
------------------------------ */

a {
  color: inherit;
  text-decoration: none;
  transition: opacity .15s ease, color .15s ease;
}

a:hover {
  opacity: 0.92;
}

a:focus-visible {
  outline: 2px solid var(--jp-color-primary);
  outline-offset: 2px;
}


/* ------------------------------
   5. Images
------------------------------ */

img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}


/* ------------------------------
   6. Lists
------------------------------ */

ul, ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}


/* ------------------------------
   7. Code blocks
------------------------------ */

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: #e5e7eb;
  padding: 0.2rem 0.35rem;
  border-radius: 0;
}


/* ------------------------------
   8. Utility resets
------------------------------ */

button {
  font-family: inherit;
  cursor: pointer;
}