/* ============================================================
   SHO-HAN Design Tokens — v0.1
   社内業務基盤システム / Navy-led editorial business UI
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Sans+JP:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ─────────────────────────────────────────────
     COLOR  — Navy primary, Action blue, sparing coral accent
     ───────────────────────────────────────────── */

  /* Primary identity */
  --sh-navy:        #0F2451;   /* corporate navy — bars, brand */
  --sh-navy-2:      #1B3978;
  --sh-navy-3:      #2A55A0;
  --sh-navy-ink:    #0A1A3A;   /* navy used as text */

  /* Action / link */
  --sh-blue:        #2563EB;   /* primary action button */
  --sh-blue-2:      #1D4ED8;
  --sh-blue-tint:   #E8EFFD;   /* hover bg, selected row */

  /* Accent — used sparingly (alerts, key status) */
  --sh-coral:       #E5484D;   /* warning / danger */
  --sh-coral-tint:  #FDECEC;
  --sh-amber:       #D97706;   /* attention */
  --sh-amber-tint:  #FEF3DA;
  --sh-mint:        #0E8C5E;   /* success */
  --sh-mint-tint:   #E5F5EE;

  /* Surfaces */
  --sh-bg:          #FAFAF7;   /* page warm off-white */
  --sh-surface:     #FFFFFF;   /* cards */
  --sh-panel:       #F2F4F8;   /* secondary panel */
  --sh-row-alt:     #F7F8FA;   /* zebra */
  --sh-overlay:     rgba(15,36,81,0.06);

  /* Ink scale */
  --sh-ink:         #0B1426;
  --sh-ink-2:       #344056;   /* secondary text */
  --sh-ink-3:       #6B7587;   /* meta */
  --sh-ink-4:       #9AA3B2;   /* disabled */
  --sh-ink-5:       #C7CCD6;

  /* Hairlines */
  --sh-line:        #E5E8EE;
  --sh-line-soft:   #EEF0F4;
  --sh-line-strong: #CBD0DA;

  /* Status */
  --sh-status-success: var(--sh-mint);
  --sh-status-warn:    var(--sh-amber);
  --sh-status-danger:  var(--sh-coral);
  --sh-status-info:    var(--sh-blue);

  /* ─────────────────────────────────────────────
     TYPE
     ───────────────────────────────────────────── */

  --sh-font-jp:        "Inter", "Noto Sans JP", "IBM Plex Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --sh-font-latin:     "Inter", "Noto Sans JP", system-ui, sans-serif;
  --sh-font-display:   "Bebas Neue", "Inter", system-ui, sans-serif;
  --sh-font-mono:      "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  --sh-font-num:       "Inter", "Noto Sans JP", system-ui, sans-serif; /* w/ tnum */

  /* sizes (px) */
  --sh-fs-mega:    56px;
  --sh-fs-h1:      32px;
  --sh-fs-h2:      24px;
  --sh-fs-h3:      18px;
  --sh-fs-h4:      16px;
  --sh-fs-body:    15px;
  --sh-fs-small:   13px;
  --sh-fs-meta:    11px;

  --sh-lh-tight:   1.18;
  --sh-lh-snug:    1.4;
  --sh-lh-body:    1.7;

  --sh-tk-display: 0.04em;
  --sh-tk-meta:    0.14em;

  /* ─────────────────────────────────────────────
     SPACING (4px base)
     ───────────────────────────────────────────── */
  --sh-s-1:  4px;  --sh-s-2:  8px;  --sh-s-3:  12px;
  --sh-s-4: 16px;  --sh-s-5: 20px;  --sh-s-6:  24px;
  --sh-s-8: 32px;  --sh-s-10:40px;  --sh-s-12: 48px;
  --sh-s-16:64px;

  /* ─────────────────────────────────────────────
     RADII / SHADOWS / MOTION
     ───────────────────────────────────────────── */
  /* Radii — system standard 8px (per 2026 design language update) */
  --sh-r-sm:  4px;
  --sh-r-md:  8px;
  --sh-r-lg:  8px;
  --sh-r-xl:  12px;
  --sh-r-pill:999px;

  --sh-shadow-card:  0 1px 2px rgba(11,20,38,0.04), 0 1px 3px rgba(11,20,38,0.06);
  --sh-shadow-card-h:0 4px 12px rgba(11,20,38,0.08), 0 2px 4px rgba(11,20,38,0.05);
  --sh-shadow-elev:  0 8px 24px rgba(11,20,38,0.10);
  --sh-shadow-nav:   0 1px 0 var(--sh-line);

  --sh-dur-fast:  140ms;
  --sh-dur-base:  220ms;
  --sh-ease:      cubic-bezier(.2,.7,.2,1);

  /* ─────────────────────────────────────────────
     LAYOUT
     ───────────────────────────────────────────── */
  --sh-sidebar-w:  240px;
  --sh-topbar-h:   56px;
  --sh-tabbar-h:   72px;
}

/* ─────────────────────────────────────────────
   Element resets scoped to SHO-HAN
   ───────────────────────────────────────────── */
.sh-root, .sh-root * { box-sizing: border-box; }
.sh-root {
  font-family: var(--sh-font-jp);
  font-size: var(--sh-fs-body);
  line-height: var(--sh-lh-body);
  color: var(--sh-ink);
  background: var(--sh-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt" 1;
}
.sh-root h1, .sh-root h2, .sh-root h3, .sh-root h4 {
  margin: 0; font-weight: 700; line-height: var(--sh-lh-snug);
}
.sh-root p { margin: 0; }
.sh-num {
  font-family: var(--sh-font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.sh-display {
  font-family: var(--sh-font-display);
  letter-spacing: var(--sh-tk-display);
  text-transform: uppercase;
}
.sh-meta {
  font-family: var(--sh-font-latin);
  font-size: var(--sh-fs-meta);
  letter-spacing: var(--sh-tk-meta);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--sh-ink-3);
}

/* ─────────────────────────────────────────────
   Buttons
   ───────────────────────────────────────────── */
.sh-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sh-font-jp);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  padding: 10px 16px;
  border-radius: var(--sh-r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--sh-dur-fast) var(--sh-ease),
              border-color var(--sh-dur-fast) var(--sh-ease),
              color var(--sh-dur-fast) var(--sh-ease),
              box-shadow var(--sh-dur-fast) var(--sh-ease);
  white-space: nowrap;
  user-select: none;
}
.sh-btn--primary {
  background: var(--sh-navy);
  color: #fff;
}
.sh-btn--primary:hover { background: var(--sh-navy-2); }
.sh-btn--action {
  background: var(--sh-blue);
  color: #fff;
}
.sh-btn--action:hover { background: var(--sh-blue-2); }
.sh-btn--ghost {
  background: transparent;
  color: var(--sh-ink);
  border-color: var(--sh-line-strong);
}
.sh-btn--ghost:hover { background: var(--sh-panel); }
.sh-btn--text {
  background: transparent;
  color: var(--sh-blue);
  padding-left: 8px; padding-right: 8px;
}
.sh-btn--text:hover { background: var(--sh-blue-tint); }
.sh-btn--danger {
  background: #fff;
  color: var(--sh-coral);
  border-color: var(--sh-coral);
}
.sh-btn--sm { padding: 6px 10px; font-size: 12px; }
.sh-btn--lg { padding: 14px 22px; font-size: 15px; }

/* Icon button */
.sh-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--sh-r-md);
  background: transparent; border: none; cursor: pointer;
  color: var(--sh-ink-2);
  transition: background var(--sh-dur-fast) var(--sh-ease), color var(--sh-dur-fast) var(--sh-ease);
}
.sh-iconbtn:hover { background: var(--sh-panel); color: var(--sh-ink); }

/* ─────────────────────────────────────────────
   Card / Surface
   ───────────────────────────────────────────── */
.sh-card {
  background: var(--sh-surface);
  border-radius: var(--sh-r-lg);
  border: 1px solid var(--sh-line);
  box-shadow: var(--sh-shadow-card);
}

/* ─────────────────────────────────────────────
   Chip / Tag
   ───────────────────────────────────────────── */
.sh-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--sh-font-jp);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--sh-r-sm);
  background: var(--sh-panel);
  color: var(--sh-ink-2);
  line-height: 1.4;
  letter-spacing: 0.02em;
}
.sh-chip--navy   { background: var(--sh-navy); color: #fff; }
.sh-chip--blue   { background: var(--sh-blue-tint); color: var(--sh-blue-2); }
.sh-chip--mint   { background: var(--sh-mint-tint); color: var(--sh-mint); }
.sh-chip--amber  { background: var(--sh-amber-tint); color: var(--sh-amber); }
.sh-chip--coral  { background: var(--sh-coral-tint); color: var(--sh-coral); }
.sh-chip--ghost  { background: transparent; border: 1px solid var(--sh-line); color: var(--sh-ink-3); }

/* ─────────────────────────────────────────────
   Form
   ───────────────────────────────────────────── */
.sh-input {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--sh-line-strong);
  border-radius: var(--sh-r-md);
  background: #fff;
  color: var(--sh-ink);
  transition: border-color var(--sh-dur-fast) var(--sh-ease), box-shadow var(--sh-dur-fast) var(--sh-ease);
  outline: none;
}
.sh-input:focus { border-color: var(--sh-blue); box-shadow: 0 0 0 3px var(--sh-blue-tint); }
.sh-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--sh-ink-2);
  margin-bottom: 6px;
}

/* ─────────────────────────────────────────────
   Status dot
   ───────────────────────────────────────────── */
.sh-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.sh-dot--mint  { background: var(--sh-mint); }
.sh-dot--amber { background: var(--sh-amber); }
.sh-dot--coral { background: var(--sh-coral); }
.sh-dot--navy  { background: var(--sh-navy); }
.sh-dot--ink   { background: var(--sh-ink-4); }